/*
Step Nav CSS
*/

@font-face {
  font-family: Hiragino;
  src: url("../font/Hiragino\ Maru\ Gothic\ Pro\ W4.otf");
}

@font-face {
  font-family: ARIBLK;
  src: url("../font/f_ARIBLK.TTF");
}
@font-face {
  font-family: Helvetica;
  src: url("../font/Helvetica.ttf");
}
@font-face {
  font-family: ArialBold;
  src: url("../font/arialbd.ttf");
}
@font-face {
  font-family: Arial;
  src: url("../font/arial.ttf");
}
@font-face {
  font-family: ArialBlk;
  src: url("../font/ariblk.ttf");
}
@font-face {
  font-family: HGRGE;
  src: url("../font/HGRGE.TTC");
}
@font-face {
  font-family: HansanMedium;
  src: url("../font/SourceHanSansJP-Medium.ttf");
}
@font-face {
  font-family: "SourceHanSansJP";
  src: url("../font/SourceHanSansJP-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: CVJCollege;
  src: url("../font/f_CVJCollege-Regular.ttf");
}

@font-face {
  font-family: CVJNinja;
  src: url("../font/f_CVJNinja-Regular.ttf");
}

@font-face {
  font-family: CVJStickerGothic;
  src: url("../font/f_CVJStickerGothic-Regular.ttf");
}

@font-face {
  font-family: CVJStickerNumber;
  src: url("../font/f_CVJStickerNumber-Regular.ttf");
}

@font-face {
  font-family: CVJStickerSerif;
  src: url("../font/f_CVJStickerSerif--Regular.ttf");
}

@font-face {
  font-family: Sacramento;
  src: url("../font/f_Sacramento-Regular.ttf");
}

@font-face {
  font-family: HGPGothicE;
  src: url("../font/f_HGPGothicE-02.ttf");
}

body {
  font-family: Hiragino;
}

.Hiragino {
  font-family: Hiragino;
}

.step-nav {
  font-family: Hiragino;
  font-size: min(1.3vw, 10px);
  text-align: right;
  background-color: #c1c4be;
}

.step-nav ol {
  width: 100vw;
  list-style: none;
  color: #fff;
  border-color: #5397ba;
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 50px;
}

.step-nav ol::before {
  display: inline-block;
  content: "";
  color: #272627;
  /* margin-right: 10px; */
  position: relative;
  z-index: 2;
}

.step-nav ol li {
  box-sizing: border-box;
  width: calc((100% - 4em - 30px) / 4);
  display: flex;
  position: relative;
  padding: 15px 15px;
  padding-right: 0;
  /* text-align: center; */
  text-align: left;
  overflow: hidden;
  background: #c1c4be;
  height: 100%;
  /* white-space: nowrap; */
  align-items: center;
  justify-content: center;
}

.step-nav ol li::before {
  display: block;
  content: "";
  box-sizing: border-box;
  /* padding: 22px 23px; */
  padding: 16px 19px;
  border: 2px #e5dcb9 solid;
  transform: rotate(-55deg) skew(-23deg);
  -webkit-transform: rotate(-55deg) skew(-23deg);
  clip: rect(3px auto auto 3px);
  position: absolute;
  top: 10px;
  left: -25px;
}

.step-nav ol li::before {
  border-color: #fff;
}

.step-nav ol li:first-child::before {
  border-color: #c1c4be;
}

.step-nav ol li .current::before {
  border-color: #272627;
}

.step-nav ol li.current {
  z-index: 1;
}

.step-nav ol li.current,
.step-nav ol li.current + li::before {
  background: #272627;
  color: #fff;
  border-color: #272627;
  border-style: solid;
  border-width: 1px;
}

.step-nav ol li.current:not(:last-child) {
  padding-right: 10px;
}

.step-nav ol li.current::before,
.step-nav ol li.current + li::before {
  border-width: 0;
  padding: 17px 21px;
  /* top: 9px;
  left: -27px; */
}

.step-nav ol li.current::before {
  background: #272627;
}

.top-detail {
  font-size: min(1.8vw, 24px);
  font-family: Hiragino;
  color: #999999;
}

.start {
  font-family: Arial, Helvetica, sans-serif;
  font-size: min(1.8vw, 24px);
  height: 7vw;
  max-height: 70px;
  background-color: #272627;
}

.standardEdition {
  font-family: Arial, Helvetica, sans-serif;
  font-size: min(1.8vw, 24px);
  height: 7vw;
  max-height: 70px;
  background-color: #272627;
}

.limitedEdition {
  font-family: Arial, Helvetica, sans-serif;
  font-size: min(1.5vw, 20px);
  height: 7vw;
  max-height: 70px;
  background-color: #be266f;
}

.logo {
  margin-top: 20vw;
}

.logo-title {
  font-size: min(2vw, 24px);
  font-family: Hiragino;
  color: #272627;
  text-align: center;
}

.logo1 {
  margin-top: 25vw;
  margin-bottom: 5vw;
}

.header-phase-en {
  font-size: min(2vw, 24px);
  font-family: Arial, Helvetica, sans-serif;
  color: #272627;
}

.header-phase {
  font-size: min(2vw, 24px);
  font-family: Hiragino;
  color: #272627;
}

.header-phase-cost {
  font-size: min(3vw, 28px);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #272627;
}

.product {
  cursor: pointer;
  border-style: solid;
  border-color: #fff;
  border-width: 5px;
  border-radius: 5px;
}

.product.active {
  cursor: pointer;
  border-style: solid;
  border-color: #272627;
  border-width: 5px;
  border-radius: 5px;
}

.div-section-standard span.active,
.div-section-name span.active,
.div-section-typography span.active,
.div-section-print span.active,
.name-font span.active,
.name-color span.active,
.name-size span.active {
  cursor: pointer;
  border-style: solid;
  border-color: #272627;
  border-width: 3px;
  border-radius: 3px;
}
.name-size {
  margin: 10px 0;
}
.product-title {
  font-size: 16px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

.product-title-jp {
  font-size: 16px;
  font-weight: bold;
  font-family: Hiragino;
}

.home-button {
  height: 3vw;
  max-height: 30px;
}

.next-button {
  font-size: min(1.5vw, 20px);
  height: 5vw;
  max-height: 50px;
  background-color: #272627;
}

.prev-button {
  font-size: min(1.5vw, 20px);
  height: 5vw;
  max-height: 50px;
  background-color: #645964;
}

.disabled {
  background-color: #d8d8d8;
}

.product-converse {
  width: 100vw;
  height: 35vw;
  max-height: 500px;
  background-color: #fafafa;
}

.product-converse-image {
  height: 100%;
  /* width: 105%;
  max-width: 105%; */
}

.product-converse-div {
  height: 35vw;
  max-height: 400px;
}

.sneak-style-button.active {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  font-size: min(2vw, 22px);
  height: 5vw;
  max-height: 50px;
  background-color: #272627;
}

.sneak-style-button {
  color: #272627;
  border-color: #707070;
  font-size: min(2vw, 22px);
  height: 5vw;
  max-height: 50px;
  background-color: #fafafa;
}

.name-font,
.name-color {
  border-bottom-style: dotted;
  border-bottom-width: 1px;
  border-bottom-color: #707070;
  padding: 10px 0;
}

.name-font-size {
  border-style: solid;
  border-color: #999999;
  border-width: 2px;
  width: 50px;
  height: 50px;
}

.jp-btn,
.name-text {
  /* font-family: Hiragino; */
  overflow-wrap: break-word;
  font-size: 0.75rem;
}
.sneaker-type {
  padding: 4px;
}

.name-input {
  font-family: Hiragino;
  width: 30vw;
  min-width: 200px;
  max-width: 250px;
  border-radius: 10px;
}

.staff-input {
  font-family: Hiragino;
  width: 30vw;
  min-width: 200px;
  max-width: 250px;
  border-radius: 10px;
}

.staff-name {
  font-family: Hiragino;
  width: 100%;
  min-width: 200px;
  border-radius: 10px;
}

option {
  font-size: 12px;
}

.staff-note {
  /* background-color: #fff; */
}

.print-button {
  height: 5vw;
  max-height: 50px;
}

.div-section-standard,
.div-section-typography {
  min-height: 40vw;
  margin-top: 20px;
}

.div-section-name {
  min-height: 40vw;
  margin-top: 20px;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* Semi-transparent background */
  z-index: 9999;
  /* Ensures the overlay is on top of everything */
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

.custom-loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
  z-index: 10000;
  /* Ensure spinner is on top of the overlay */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.typography-input {
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
}

.product-converse-text {
  font-family: CVJCollege;
  font-size: min(6.5vw, 80px);
  color: #000;
  -webkit-text-stroke: 0px black;

  position: absolute;
  bottom: min(10vw, 105px);
  right: min(6vw, 63px);
}

.product-converse-text-temp {
  font-family: CVJCollege;
  font-size: min(6.5vw, 80px);
  color: #000;
  -webkit-text-stroke: 0px black;

  position: absolute;
  bottom: min(13vw, 143px);
  right: min(6vw, 63px);
}

.product-converse-name,
.product-converse-name-temp {
  font-size: 1.5vw;
  color: #000;
  -webkit-text-stroke: 0px black;

  position: absolute;
  bottom: 15vw;
  right: 7vw;
}

#capture {
  left: -99999px;
}

/* Open Modal Container/Wrapper Full-screen */
.modal-container {
  background-color: rgba(0, 0, 0, 0.3);
  /* Center modal container */
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  opacity: 0;
  /* to be hidden by default */
  pointer-events: none;
  /* so we can click the modal trigger */
  top: 0;
  left: 0;
  height: 100vh;
  /* =100% of viewport height */
  width: 100vw;
  /* = 100% of viewport width */
  transition: opacity 0.3s ease;
}

/* Activate the class that we used in JS for the Event Listeners of modal's open and close button */
.modal-container.show {
  pointer-events: auto;
  /* set back the default value */
  opacity: 1;
}

.modal-content {
  font-family: Hiragino;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* box shadow to add depth */
  padding: 7vw;
  width: 80vw;
  max-width: 100%;
  /* Assures that it' ll be kept inside the browser width */
  text-align: center;
}

/* Remove Modal at First */
.modal_container {
  display: none;
}

.plan-title {
  font-size: min(3.5vw, 32px);
}

.plan-subTitle {
  font-family: Arial, Helvetica, sans-serif;
  font-size: min(2.5vw, 24px);
}

.plan-phase {
  font-family: Arial, Helvetica, sans-serif;
  font-size: min(2vw, 18px);
  text-align: left;
}

.plan-text-jp {
  font-family: Hiragino;
  font-size: min(2vw, 18px);
  text-align: left;
}

.plan-text-en {
  font-family: Arial, Helvetica, sans-serif;
  /* font-style: italic; */
  font-size: min(2vw, 18px);
  text-align: left;
}

.modal-button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: min(2.5vw, 24px);
}

.privacy-content {
  border-style: solid;
  border-width: 1px;
  border-color: #e4e4e4;
  height: 35vw;
  overflow-y: scroll;
}

.privacy-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: min(2.5vw, 24px);
  text-align: center;
}

.privacy-text-jp {
  font-family: Hiragino;
  font-size: min(1.5vw, 16px);
  text-align: left;
}

.privacy-text-en {
  font-family: Arial, Helvetica, sans-serif;
  font-size: min(1.5vw, 16px);
  /* font-style: italic; */
  text-align: left;
}

.thankyou-container {
  top: 40%;
}

.thankyou {
  font-family: Hiragino;
  font-size: min(2.5vw, 24px);
}

.thankyou-point {
  bottom: 5vw;
  right: 5vw;
}

.staff-size-box {
  border-style: dotted;
  border-color: #707070;
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.staff-size {
  border-style: solid;
  border-width: 1px;
  /* border-color: #707070; */
  border-color: #fff;
  padding-inline: 0.4vw;
  /* padding-top: 0.7vw;
  padding-bottom: 0.7vw; */
  border-radius: 6%;
  text-align: center;
  font-size: 0.6rem;
  cursor: pointer;
}

.staff-size.active {
  border-width: 2px;
  border-color: #000;
}

.custom-title {
  font-size: min(2.5vw, 24px);
}
.bottom-24-5 {
  bottom: 24.5vw !important;
}
.bottom-15-2 {
  bottom: 15.2vw !important;
}
.bottom-23-5 {
  bottom: 23.5vw !important;
  white-space: pre;
}
.bottom-24-5 {
  bottom: 24.5vw !important;
  white-space: pre;
}
.bottom-23 {
  bottom: 23vw !important;
  white-space: pre;
}
.white-space {
  white-space: pre !important;
}
.bottom-15 {
  bottom: 15vw !important;
}
.bottom-14-0 {
  bottom: 14vw !important;
}
.bottom-14-4 {
  bottom: 14.4vw !important;
}
.bottom-14-5 {
  bottom: 14.5vw !important;
}
.bottom-14-7 {
  bottom: 14.7vw !important;
}
.bottom-14-8 {
  bottom: 14.8vw !important;
}
.bottom-15-0 {
  bottom: 15vw !important;
}
.bottom-15-2 {
  bottom: 15.2vw !important;
}
.bottom-15-4 {
  bottom: 15.4vw !important;
}
.bottom-15-7 {
  bottom: 15.7vw !important;
}
.bottom-16-0 {
  bottom: 16vw !important;
}
.bottom-16-75 {
  bottom: 16.75vw !important;
}
.bottom-17 {
  bottom: 17vw !important;
}
.bottom-17-5 {
  bottom: 17.5vw !important;
}
.bottom-17-75 {
  bottom: 17.75vw !important;
}
.bottom-18-2 {
  bottom: 18.2vw !important;
}
.right-8-0 {
  right: 8vw !important;
}
.right-6-0 {
  right: 6vw !important;
}
.left-8-0 {
  left: 8vw !important;
}

/* Staff size selection styles */
.staff-size {
  cursor: pointer;
  padding: 8px 12px;
  border: 2px solid #ddd;
  border-radius: 8px;
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
  background-color: #fff;
  transition: all 0.2s ease;
  margin: 2px;
}

.staff-size:hover {
  border-color: #666;
  background-color: #f5f5f5;
}

.staff-size.selected {
  border-color: #333;
  background-color: #333;
  color: white;
  font-weight: bold;
}
.font-gothic {
  font-family: Helvetica;
}
.text-18 {
  font-size: 1.8rem !important;
}