.input-container { 
  margin: 0 auto;
  max-width: 40em;
}

.spinner {
width: 1em;
height: 1em; 
border: 4px solid var(--pplus-color-mono-xlight);
border-top-color: var(--pplus-color-mono-medium);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.size-note{
  display: block;
}
@media (min-width:50rem) {
  .size-note{
    margin: 1em 0;
}
}

/*==== 進捗 ====*/

.progress{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pplus-gap-xnarrow);
  margin: 0 0 -1em;
  padding: 0;
  font-size: 0.8em;
  line-height: 1;
  list-style: none;
}
.progress > li{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pplus-gap-xnarrow);
}
.progress__step{
  width: 2em;
  height: 2em;
  border: solid thin var(--pplus-color-mono-medium);
  border-radius: 50%;
  color: var(--pplus-color-mono-medium);
  line-height: 2em; /* ヒラギノ対策 */
}
em.progress__step{
  background: var(--pplus-color-mono-medium);
  color: var(--pplus-color-bg);
  font-style: normal;
}
.progress > li::after{
  content: "";
  display: block;
  width: 1em;
  height: 1px;
  margin: 0 3px;
  background: var(--pplus-color-mono-medium);
}
.progress > li:last-of-type:after{
  display: none;
}
@media (min-width:50rem) {
  .progress{
    margin-bottom: -2em;
  }
}

.shorttext { text-align: center; }

/*==== サイズ選択 ====*/

.size-selection { 
  margin: var(--pplus-margin-section) auto;
  max-width: var(--pplus-width-text);;
  text-align: left;
}
.size-option { /* 見た目ボタンとして表現される領域 */
  display: flex;
  margin: 0.5em 0; 
  padding: 1em; 
  border: thin solid var(--pplus-color-mono-medium); 
  border-radius: 1em;
  cursor: pointer; 
}
.size-option.selected {
  background: var(--pplus-color-highlight-light);
  border-color: var(--pplus-color-highlight);
}
.size-option:has(input[type="number"]){
  align-items: center;
}
.size-option > input[type="radio"] { 
  flex-shrink: 0;
  margin: 0 1em 0 0; 
  width: 1.5em;
  height: 1.5em;
}
.size-option > label {
  flex: 1 1 auto;
}
.longselect {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/*==== アップローダー ====*/

.upload-area {
  border-radius: 1.5em;
  max-width: var(--pplus-width-text);
  margin: var(--pplus-margin-section) auto;
  padding: 1em 1em 5em;
  background: url(../img/icon_pic.svg) no-repeat 50% calc(100% - 2em) var(--pplus-color-mono-xlight);
  background-size: auto 3em;
  text-align: center;
  cursor: pointer;
  word-break: keep-all;
  white-space: nowrap;
}

/*==== 画像編集  ====*/

.editor{
  --pplus--editor--btnwidth: 2.5em;
}
@media (min-width:50rem) {
.editor{
  --pplus--editor--btnwidth: 3em;
}
}

.editor{
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 100%;
  max-width: calc(var(--pplus-width-text) + 6em);
}
.btn--editor{
  border: solid 0.5px var(--pplus-color-mono-mediumdark);
  color: var(--pplus-color-main);
  border-radius: 0.5em;
  background: var(--pplus-color-bg);
  font-size: 1em;
}
.btn--editor.active{
  border-color: var(--pplus-color-highlight-dark);
  border-width: 3px;
}

/* プレビュー */
.editor__image{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  height: 90vw;
  max-width: var(--pplus-width-text);
  max-height: 30em;
  margin: 0 auto 0.75em;
  padding: 4em;
}
.canvas-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 10em;
}
.canvas-container__canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* 画像の移動や回転 */
.move-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pplus--editor--btnwidth);
  aspect-ratio: 1 / 1;
  padding: 0;
}
.move-btn--up{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.move-btn--down{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.move-btn--left{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.move-btn--right{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.move-btn--turnleft{
  position: absolute;
  bottom:0;
  left: 0;
}
.move-btn--turnright{
  position: absolute;
  bottom:0;
  left: 3em;
}
.move-btn--zoomin{
  position: absolute;
  bottom:0;
  right: 3em;
}
.move-btn--zoomout{
  position: absolute;
  bottom:0;
  right: 0;
}
@media (min-width:50rem) {
  .move-btn--turnright{
    left: 3.5em;
  }
  .move-btn--zoomin{
    right: 3.5em;
  }
}

/* 画像の移動や回転：擬似要素による装飾 */
.editor{
  --pplus--editor--arrowaspect: 0.72;
  --pplus--editor--linewidth: 2px;
  --pplus--editor--linewidth--circle: calc(var(--pplus--editor--linewidth) * 0.95); /* ちょっと太く見える */
  --pplus--editor--turncircle: calc(var(--pplus--editor--btnwidth) * 0.5);
}

.move-btn--zoomout::before,
.move-btn--zoomin::before,
.move-btn--zoomin::after{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: var(--pplus--editor--linewidth);
  background: var(--pplus-color-main);
  transform: translate(-50%, -50%);
}
.move-btn--zoomin::after{
  transform: translate(-50%, -50%) rotate(90deg);
}
.move-btn--left::before,
.move-btn--right::before,
.move-btn--up::before,
.move-btn--down::before{
  content: "";
  display: block;
  width: 35%;
  aspect-ratio: 1 / var(--pplus--editor--arrowaspect);
  background: var(--pplus-color-main);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.move-btn--left::before{
  transform: rotate(-90deg);
}
.move-btn--right::before{
  transform: rotate(90deg);
}
.move-btn--down::before{
  transform: rotate(180deg);
}
.move-btn--turnleft::before,
.move-btn--turnright::before{
  content: "";
  display: block;
  box-sizing: border-box;
  width: var(--pplus--editor--turncircle);
  aspect-ratio: 1 / 1;
  border: solid var(--pplus--editor--linewidth--circle) var(--pplus-color-main);
  border-radius: 50%;
  clip-path:polygon(0% 0%, 100% 0%, 100% 50%, 50% 50%, 50% 100%, 0% 100%);
}
.move-btn--turnleft::before{
  transform: scaleX(-100%);
}
.move-btn--turnleft::after,
.move-btn--turnright::after{
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  width: 25%;
  aspect-ratio: 1 / var(--pplus--editor--arrowaspect);
  background: var(--pplus-color-main);
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
.editor{
  --pplus-movebtn-turn-position: calc((var(--pplus--editor--btnwidth) - var(--pplus--editor--turncircle)) / 2);
  --pplus-movebtn-turn-transform: calc(50% - var(--pplus--editor--linewidth) / 2);
}
.move-btn--turnright::after{
  right: var(--pplus-movebtn-turn-position);
  transform:translate(var(--pplus-movebtn-turn-transform), calc(var(--pplus--editor--linewidth) * -1));
}
.move-btn--turnleft::after{
  left: var(--pplus-movebtn-turn-position);
  transform: translate(calc(var(--pplus-movebtn-turn-transform) * -1), calc(var(--pplus--editor--linewidth) * -1));
}


/* その他コントロール */
.controls{
  display: grid;
  align-items: center;
  grid-template-columns: auto 1fr;
  gap: 0.5em 0.25em;
}
.controls__area{
  margin: 0;
  padding: 0;
}
.controls__hdr{
  margin: 0.25em 0 0;
  font-weight: bold;
}
.controls__hdr--bg{
  align-self: start;
  margin-top: 0.6em;
}
@media (min-width:50rem) {
  .controls{
    grid-template-columns: 2.5em auto;
    gap: 1em 0.5em;
    margin: 0;
  }
  .controls__hdr{
    margin: 0;
  }
}
/* 肌色 */
.controls__area--skin{
  display: flex;
  gap: 0.5em;
}
.skin-btn{
  flex: 1 1 100%;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
}
.skin-btn--normal{
  background: #f9ddd3;
}
.skin-btn--formal{
  background: #fcebd8;
}
.skin-btn--whitening{
  background: #fcefed;
}
.skin-btn--healthy{
  background: #f6c9a6;
}
@media (max-width:30rem) {
  .skin-btn{
    font-size: 0.9em;
  }
}
@media (min-width:50rem) {
  .controls__hdr--bg{
    align-self: start;
    margin-top: 0.6em;
  }
}
/* 背景色 */
.controls__area--bg{
  --pplus-width-bgbtn:2.25em;
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--pplus-width-bgbtn));
  justify-content: center;
  gap: 0.5em;
}
.bg-btn{
  width: var(--pplus-width-bgbtn);
  aspect-ratio: 1 / 1;
  border-radius: 0.5em;
}
.btn--editor--none{
  position: relative;
  overflow: hidden;
}
.btn--editor--none::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 125%;
  height: 1px;
  background: var(--pplus-color-warning);
  transform: translate(-50%, -50%) rotate(45deg);
}
.controls__bg__border{
  width: 0.5px;
  height: var(--pplus-width-btn);
  margin: 0 auto;
  background: var(--pplus-color-mono-medium);
}
@media (min-width:50rem) {
  .controls__bg__border--sub{
    display: none;
  }
  .controls__hdr--bg{
    align-self: start;
    margin-top: 0.6em;
  }
}
/* 背景セクションは肌色と同様、モバイルでも左ラベル＋右ボタンの2列配置 */

/*==== プレビュー ====*/

.preview{
  max-width: var(--pplus-width-text);
}

/*==== メール登録 ====*/
.email{
  width: 100%;
  max-width: 20rem;
  margin: 1rem 0 2rem;
  padding: 1em 1.25em;
  border: solid thin var(--pplus-color-mono-xlight);
  border-radius: 1em;
  background: var(--pplus-color-mono-pale);
  font-size: 17px;
}
.email::placeholder{
  color: var(--pplus-color-mono-light);
  text-align: center;
}
.btn--email{
  width: 20rem;
  max-width: 100%;
}

/*==== 番号 ====*/

/* 番号エリア */
.num-hdr{
  position: relative;
  max-width: var(--pplus-width-text);
  margin: 1.5em 0 0.5em 1.25em;
  font-size: 1em;
  font-weight: normal;  
  text-align: left;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.number-hdr__block{
  display: inline-block;
}
.num-hdr::before{
  content: "▼";
  position: absolute;
  left: -1.5em;
}
.num-list__cvs{
  flex-wrap: wrap;
  border: solid 2px var(--pplus-color-mono-xlight);
  padding: 1rem;
}
.num-list__cvs > .cvs-list__name--711{ /* ここだけポツンとするので大きめにする */
  width: 4em;
}
.num-list__numarea{
  border: solid 2px var(--pplus-color-mono-xlight);
  margin-top: -2px;
  padding: 1rem;
  background: var(--pplus-color-bg-strong);
  text-align: center;
}
.num-list__numarea__qr{
  width: 15em;
  height: 15em;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.num-list__numarea__qr--seven{
  width: 16em;
  height: 16em;
}
.num-list__numarea__num{
  margin: 0.75rem 0 0.5rem;
  margin-bottom: 0;
  font-size: 2em;
  font-weight: bold;
  line-height: 1;
}
.num-list__numarea__btn{
  min-width: 0;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.75em 1em;
  background: #345c9b;
  font-size: 0.8em;
  font-family: inherit;
}
@media(min-width:40em){
  .num-list{
    display: grid;
    grid-template-columns: 40% 1fr;
  }
  .num-list__cvs{
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.75em; 
    font-size: 1.1em;
  }
  .num-list__numarea{
    margin-top: 0;
    margin-left: -2px;
  }
}