@charset "UTF-8";
header {
  position: unset;
  margin-top: -45px;
}

@media screen and (min-width: 768px) {
  #wrapper {
      width: 100%;
  }
  header {
      width: 100%;
      /* left: auto; */
  }
}

/*start*/
.w95m0auto_bg_fo {
  /* width: 95%; */
  margin: 0 auto !important;
  background-color: #f0f0f0;
  padding: 20px;
}
/*end*/

.mainContent {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  /* min-height: 100vh; */
  margin: 0;
  background-color: #f0f0f0;
  padding: 20px;
}

@media screen and (min-width: 768px) {
  .mainContent {
    min-height: 0vh;
  }
}

.container {
  padding-top: 0px; /* height of the fixed logo-preview plus some margin */
  /*padding-top: 350px;*/ /* height of the fixed logo-preview plus some margin */
}
@media (min-width: 768px) {
  .container {
      display: flex;
      /* flex-direction: column; */
      gap: 20px;
      max-width: 1000px;
      width: 100%;
      padding-top: 0px;
      flex-direction: row;
  }
}
.controls {
  margin-top: 20px;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  flex: 1;
  min-width: 300px;
}

.controls p {
  padding-top: 10px;
}

@media (min-width: 768px) {
  .controls {
    margin-top: 0px;
  }
}

.container h1, .container h2 {
  font-weight: bold;
  font-size: 1.7rem;
  color: #34495E;
  padding: 5px;
}

.container h1 {
  padding: 0px;
  padding-bottom: 15px;
}

/* .controls h2 {
  font-weight: bold;
  font-size: 1.7rem;
  color: #34495E;
  padding: 5px;
} */

.logo-preview {
  position: relative;
  top: 0;
  height: auto;
  z-index: 1000;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.logo-preview.fixed {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /* Adjust as necessary */
  /* margin-top: 20px; */
}
.logo-preview img, #logo-svg {
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .logo-preview {
      width: 350px;
      height: 350px;
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      position: relative;
      overflow: hidden;
      margin: 0 auto;
  }
  /* .container {
      padding-top: 0px;
      flex-direction: row;
  } */
  .controls {
      order: 2;
  }
  .logo-preview {
      order: 1;
  }
}

.logo-preview img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.form-group, .form-group_font {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.form-group_font {
  display: block;
  margin-bottom: 20px;
}

.form-group label, .form-group_font label {
  min-width: 50px;
}
.form-group input, .form-group select, .form-group_font input, .form-group_font select {
  flex: 1;
  padding: 8px;
  margin-left: 10px;
}
.form-group_font input {
  height: 20px;
}
#textColor {
  flex: none;
  padding: 0;
  margin-left: 10px;
}
.tshirt-color-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.tshirt-color-option {
  width: 40px;
  height: 40px;
  border: 2px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 4px;
}
.tshirt-color-option.selected {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0,123,255,0.5);
}
.tshirt-color-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#logo-svg {
  width: 350px;
  height: 350px;
  position: relative;
  z-index: 1;
}
.slider-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.slider-container label {
  flex: 1;
  margin-right: 10px;
}
.slider-container input {
  flex: 2;
}
.radio-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.radio-container label {
  flex: 1;
  margin-right: 10px;
}
.train-one-regular {
  font-family: 'Train One', system-ui;
  font-weight: 400;
  font-style: normal;
}
.wf-nicomoji {
  font-family: "Nico Moji", sans-serif;
}
.sisters-three {
  font-family: "sisters-three", sans-serif;
}
.dogma-outline {
  font-family: "dogma-outline", sans-serif;
}
.dogma-extra-outline {
  font-family: "dogma-extra-outline", sans-serif;
}
.font-option {
  display: block;
  margin-bottom: 10px;
  position: relative;
}
.font-option input {
  margin-right: 10px;
}
.font-label {
  display: inline-block;
  font-size: 3.4rem;
}

/*start*/
.font-small-fix {
  font-size: 1.2rem; /* 小さいフォントに対して調整 */
}

.font-abril-titling { font-family: 'abril-titling', serif; }
.font-dogma-outline { font-family: 'dogma-outline', sans-serif; }
.font-ff-karbid-slab-web-pro { font-family: 'ff-karbid-slab-web-pro', serif; }
.font-elizeth-condensed { font-family: 'elizeth-condensed', serif; }
.font-industry-inc-detail { font-family: "industry-inc-detail", sans-serif;}
.font-industry-inc-in-n-out { font-family: "industry-inc-in-n-out", sans-serif;}
.font-becker-gothics-egyptian { font-family: "becker-gothics-egyptian", sans-serif;}
.font-becker-gothics-concave { font-family: "becker-gothics-concave", serif;}
.font-becker-gothics-stencil { font-family: "becker-gothics-stencil", sans-serif;}
.font-sweet-titling-no-11 { font-family: "sweet-titling-no-11", sans-serif;}
.font-campus-mn { font-family: "campus-mn", sans-serif;}
.font-train-one { font-family: 'Train One', cursive; }
/*start*/
/* .alumni-sans-collegiate-one-regular {
  font-family: "Alumni Sans Collegiate One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.alumni-sans-collegiate-one-regular-italic {
  font-family: "Alumni Sans Collegiate One", sans-serif;
  font-weight: 400;
  font-style: italic;
} */

.font-alumni-sans-collegiate-one {
  font-family: "alumni-sans-collegiate-one", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 5rem; /* 必要に応じて大きさを調整 */
}

/* .font-alumni-sans-collegiate-one {
  font-family: "alumni-sans-collegiate-one", sans-serif;
  font-size: 50px;
} */

/* new
font-family: "campus-mn", sans-serif;
font-weight: 400;
font-style: normal; 
*/
.font-number {
  position: absolute;
  top: 14px;
  left: -15px;
}
.pt10 {
  padding-top: 10px;
}

.m0a_tac {
  margin: 0 auto;
  width: 98%;
  /* text-align: center; */
}

.goods_nav01 {
  margin: 0 auto;
}

@media (min-width: 768px) {
  .goods_nav01 {
    width: 53%;
    margin: 0 auto;
  }
}

.bg_white {
  margin-top: -20px;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  /* flex: 1;
  min-width: 300px; */
}

@media (min-width: 768px) {
  .bg_white {
    width: 52%;
  }
}

.table_col_02 td {
  text-align: left;
}