@charset "UTF-8";
/* CSS Document */
#wrapper {
  margin: 0 auto;
}

body {
  min-height: 100vh;
  position: relative;
  background: url(../images/banner-img/oshi_bg.jpg);
  background-size: 100% auto;
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
}

#maker {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#maker h2 {
  background: url(../images/banner-img/maker_tit.png) no-repeat center;
  background-size: contain;
  text-indent: -999rem;
}
#maker .console {
  position: relative;
}
#maker .console .help_wrap {
  position: absolute;
}
#maker .console .help_wrap .help {
  position: relative;
  z-index: 1;
  background: url(../images/banner-img/help.svg) no-repeat center;
  background-size: contain;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
#maker .console .help_wrap .help:hover {
  opacity: 0.75;
}
#maker .console .help_wrap .tooltip {
  position: absolute;
  background: url(../images/banner-img/tips.png) no-repeat center;
  background-size: contain;
  width: 71rem;
  height: 49rem;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
#maker .console .help_wrap .tooltip.active {
  opacity: 1;
  pointer-events: auto;
}
#maker .toul {
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 3rem;
  border: solid 0.2rem;
  background: #fff;
}
#maker .toul.open .toul_head::before {
  transform: rotate(90deg);
}
#maker .toul > *:not(.toul_head) {
  padding: 2rem;
}
#maker .toul:not(.open) > *:not(.toul_head) {
  display: none;
}
#maker .toul_head {
  color: #fff;
  cursor: pointer;
  position: relative;
  font-family: rocknroll-one, sans-serif;
  font-size: 3rem;
  padding-left: 3rem;
}
#maker .toul_head::before {
  content: "▶";
  margin-right: 1rem;
  display: inline-block;
  font-size: 2.2rem;
  top: -0.3rem;
  transition: 0.25s;
  position: relative;
}
#maker .toul_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
#maker .inputRange {
  --active: #0025DE;
  --inactive: #ffffff;
  --progress: 30%;
  appearance: none;
  width: 18.5rem;
  height: 1rem;
  border: 0.1rem solid #707070;
  border-radius: 999rem;
  cursor: pointer;
  background: linear-gradient(90deg, var(--active) var(--progress), var(--inactive) var(--progress));
}
#maker {
  /* thumb */
}
#maker .inputRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2rem;
  height: 2rem;
  border-radius: 999rem;
  background: var(--active);
  box-shadow: none;
}
#maker .inputRange::-moz-range-thumb {
  border: none;
  width: 2rem;
  height: 2rem;
  border-radius: 999rem;
  background: var(--active);
  box-shadow: none;
}
#maker .racer {
  border-color: #FC4276;
}
#maker .racer .toul_head {
  background: #FC4276;
}
#maker .racer .wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#maker .racer .kome {
  margin: 0;
}
#maker .racer .flex_c p {
  text-align: center;
  margin-top: 0;
  margin-bottom: 1rem;
}
#maker .racer .flex_c .toggle {
  margin-bottom: 1rem;
}
#maker .racer .inputRange {
  --active:#FC4276;
  border-color: #FC4276;
}
#maker .design {
  border-color: #0025DE;
}
#maker .design .toul_head {
  background: #0025DE;
}
#maker .design .inputRange {
  --active:#0025DE;
  border-color: #0025DE;
}
#maker .stamp {
  border-color: #4BD312;
}
#maker .stamp .toul_head {
  background: #4BD312;
}
#maker .stamp .inputRange {
  --active:#4BD312;
  border-color: #4BD312;
  touch-action: none;
}
#maker .stamp .flex_b button {
  padding: 0.5rem;
}
#maker .stamp .flex_b button img {
  width: 100%;
  height: auto;
}
#maker .wrap {
  border-style: solid;
  border-width: 0.1rem;
  border-color: #707070;
  border-radius: 0.5rem;
  text-align: center;
}
#maker input[type=color] {
  width: 4rem;
  height: 4rem;
  margin-top: -0.5rem;
}
#maker button {
  background: #fff;
  line-height: 0rem;
  position: relative;
  color: #000;
  -webkit-appearance: none;
  text-align: center;
  border-style: solid;
  border-width: 0.1rem;
  border-color: #707070;
  border-radius: 0.2rem;
}
#maker button.active::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-color: #00aaff;
  border-width: 0.5rem;
}
#maker button.patternBtn {
  padding: 0;
}
#maker button.iconBtn:nth-child(-n+9)::before {
  content: "";
  display: inline-block;
  position: absolute;
  background: url(../images/banner-img/rainbow.png) no-repeat center;
  background-size: contain;
}
#maker button.iconBtn:nth-child(n+25) {
  background: #e4e4e4;
  padding: 0.5rem;
}
#maker button.iconBtn img {
  width: 100%;
  height: auto;
}
#maker button.iconBtn.hi {
  padding: 0.5rem;
}
#maker button.iconBtn.hi img {
  width: auto;
  height: 100%;
}
#maker button#deleteIcon {
  background: #707070;
  display: flex;
  justify-content: center;
  align-items: center;
  border-color: #000;
  border-radius: 0.5rem;
}
#maker button#deleteIcon img {
  width: max-content;
  height: 100%;
}
#maker .toggle {
  position: relative;
  display: inline-block;
  width: 4.6rem;
  height: 1.8rem;
}
#maker .toggle::before {
  content: "";
  display: inline-block;
  width: calc(100% + 0.6rem);
  height: calc(100% + 0.6rem);
  position: absolute;
  top: -0.4rem;
  left: -0.4rem;
  border: solid 0.1rem #707070;
  border-radius: 1.3rem;
  border-spacing: 0.2rem;
}
#maker .toggle input {
  opacity: 0;
}
#maker .toggle .slider {
  position: absolute;
  inset: 0;
  background: #e9e9eb;
  border-radius: 1.3rem;
  transition: 0.2s;
}
#maker .toggle .slider::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: -0.1rem;
  left: -0.1rem;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
}
#maker .toggle input:checked + .slider {
  background: #FDA0BA;
}
#maker .toggle input:checked + .slider::before {
  transform: translateX(2.8rem);
  background: #FC4276;
}
#maker #racerSelect {
  width: 35rem;
  padding: 1rem;
  font-size: 3rem;
  height: 8rem;
  margin-top: 1rem;
}
#maker .size_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}
#maker .size_btn button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#maker .icon_buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
#maker .font_buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 1rem;
}
#maker .pattern_buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem;
}
#maker .patternBtn img {
  width: 100%;
  height: 100%;
}
#maker .btn_wrap {
  width: 72rem;
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
}
#maker .btn_wrap button {
  width: 33rem;
  height: 8rem;
  border-radius: 4rem;
  font-family: rocknroll-one, sans-serif;
  color: #fff;
  border: none;
  filter: drop-shadow(0 0.6rem 1.1rem rgba(0, 0, 0, 0.1490196078));
  margin-bottom: 3rem;
}
#maker .btn_wrap button#generate {
  background: #FC4276;
}
#maker .btn_wrap button#postX {
  background: #000;
}
#maker .btn_wrap button#postX span {
  color: #000;
  position: relative;
}
#maker .btn_wrap button#postX span::after {
  content: "";
  display: inline-block;
  width: 140%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0.4rem;
  background: url(../images/banner-img/x_logo.svg) no-repeat center;
  background-size: contain;
}
#maker .flex_b {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
#maker .flex_c .flex_b {
  align-items: baseline;
}
#maker .banner {
  width: 72rem;
  height: 14.4rem;
  border: 0.2rem #000;
  border-style: dashed;
}
#maker .banner canvas {
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
}
#maker h3.pre {
  width: 72rem;
  padding: 0.5rem;
  background: #000;
  color: #fff;
  font-size: 2rem;
  text-align: center;
  margin-top: -0.2rem;
}

.guid {
  background: url(../images/banner-img/guid.png) no-repeat center;
  background-size: contain;
  width: 100%;
  height: 91.1rem;
  margin-bottom: 5rem;
}

/***********************************************************************
ミディアムデバイス (スマートフォン) のスタイル
**********************************************************************/
@media (max-width: 750px) {
  .sp_non {
    display: none !important;
  }
  body {
    background: url(../images/banner-img/oshi_bg_sp.jpg) no-repeat;
    background-size: auto 100%;
    background-attachment: fixed;
  }
  .contents header h1 {
    background: url(../images/banner-img/header_bg.jpg) no-repeat center;
    background-size: contain;
  }
  #maker h2 {
    background: url(../images/banner-img/maker_tit_sp.png) no-repeat center;
    background-size: contain;
    width: 100%;
    height: 30.8rem;
    margin: auto;
  }
  #maker .console .help_wrap {
    right: 1rem;
    bottom: -4.5rem;
  }
  #maker .console .help_wrap .help {
    width: 6rem;
    height: 6rem;
  }
  #maker .console .help_wrap .tooltip {
    right: -1rem;
    bottom: 7rem;
  }
  #maker .toul {
    width: 71rem;
  }
  #maker .toul * {
    font-size: 3.2rem;
  }
  #maker .toul_wrap {
    padding: 3rem;
    gap: 2rem;
  }
  #maker input[type=color] {
    width: 6rem;
    height: 6rem;
  }
  #maker .inputRange {
    width: 23rem;
  }
  #maker .inputRange::-webkit-slider-thumb {
    width: 5rem;
    height: 5rem;
  }
  #maker .toggle {
    width: 8.5rem;
    height: 3.5rem;
  }
  #maker .toggle::before {
    border-radius: 2.3rem;
    width: calc(100% + 1rem);
    height: calc(100% + 1rem);
    top: -0.6rem;
    left: -0.6rem;
  }
  #maker .toggle .slider {
    border-radius: 1.6rem;
  }
  #maker .toggle .slider::before {
    width: 3.5rem;
    height: 3.5rem;
  }
  #maker .toggle input:checked + .slider::before {
    transform: translateX(5.3rem);
    background: #FC4276;
  }
  #maker .font_buttons {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  #maker button {
    width: 32rem;
    height: 8.5rem;
  }
  #maker button.fontBtn {
    font-size: 5rem;
  }
  #maker button.sizeBtn {
    width: 10rem;
    height: 8rem;
  }
  #maker button.sizeBtn:nth-child(2) {
    font-size: 3.2rem;
  }
  #maker button.sizeBtn:nth-child(3) {
    font-size: 4.8rem;
    font-weight: 700;
  }
  #maker button.patternBtn {
    width: 11rem;
    height: 11rem;
  }
  #maker button.iconBtn {
    width: 14.5rem !important;
    height: 14.5rem !important;
  }
  #maker button.iconBtn img {
    max-width: 13rem;
    max-height: 13rem;
    object-fit: contain;
  }
  #maker button.iconBtn:nth-child(-n+9) {
    padding: 1rem !important;
  }
  #maker button.iconBtn:nth-child(-n+9)::before {
    width: 4rem;
    height: 4rem;
    top: -1.7rem;
    left: -1rem;
  }
  #maker button#deleteIcon {
    width: 8.5rem;
    height: 8.5rem;
    padding: 1.5rem;
  }
  #maker .pattern_buttons {
    width: 53rem;
  }
  #maker .wrap {
    padding: 1rem;
  }
  #maker .wrap p {
    margin-top: 0rem;
    margin-bottom: 2rem;
  }
  #maker .racer .kome {
    width: 19rem;
    font-size: 2rem !important;
  }
  #maker .racer .wrap {
    width: 29rem;
  }
  #maker .racer .wrap.small {
    width: 16.5rem;
  }
  #maker .racer .wrap.small_s {
    width: 16.5rem;
  }
  #maker .racer .wrap.large {
    width: 46.5rem;
    flex-grow: 1;
  }
  #maker .racer .wrap:nth-last-child(2) {
    width: 25rem;
  }
  #maker .racer .wrap:nth-last-child(1) {
    flex-grow: 1;
  }
  #maker .design .wrap {
    width: 16.5rem;
  }
  #maker .design .wrap p {
    font-size: 2.8rem;
  }
  #maker .design .wrap.large {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem;
  }
  #maker .design .flex_c {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 12rem;
  }
  #maker .design .flex_c:last-child {
    flex-direction: row;
  }
  #maker .design .flex_c .flex_b {
    flex-direction: column;
  }
  #maker .design .flex_c .flex_b:last-child {
    margin-left: 2rem;
  }
  #maker .stamp {
    margin-bottom: 5rem;
  }
  #maker .stamp .icon_buttons {
    gap: 2rem;
  }
  #maker .stamp .icon_buttons button {
    padding: 0.5rem;
  }
  #maker .stamp .wrap {
    width: 46.5rem;
  }
  #maker .stamp .wrap.small {
    width: 16.5rem;
  }
  #maker .stamp .wrap.large {
    width: 55rem;
  }
  #maker .stamp button {
    width: 14rem;
    height: 7rem;
  }
  #maker .stamp button#scaleDown, #maker .stamp button#scaleUp {
    width: 7rem;
  }
  #maker .stamp button#bringFront, #maker .stamp button#sendBack {
    width: 24rem;
    font-size: 2.8rem;
  }
  #maker .stamp button img {
    height: 100%;
    width: 100%;
  }
  #maker .stamp .flex_b {
    margin: 2rem 0;
  }
  #maker .stamp .flex_b #rotateRight {
    margin: 0 2.5rem;
  }
  #maker .stamp .flex_b button {
    padding: 1.5rem 0.5rem;
  }
  #maker .stamp .flex_b button img {
    width: max-content;
  }
  #maker .banner {
    margin-top: 6rem;
  }
  #maker .btn_wrap button {
    font-size: 3.6rem;
  }
  #maker h3.pre {
    font-size: 3rem;
  }
  .guid {
    background: url(../images/banner-img/guid_sp.png) no-repeat center;
    background-size: contain;
    height: 127rem;
    position: relative;
  }
}
/***********************************************************************
ラージデバイス (デスクトップ) のスタイル
**********************************************************************/
@media (min-width: 751px) {
  .pc_non {
    display: none !important;
  }
  #maker button, #maker input, #maker label {
    cursor: pointer;
  }
  #maker h2 {
    width: 99rem;
    height: 26rem;
  }
  #maker .console .help_wrap {
    right: 9rem;
  }
  #maker .console .help_wrap .help {
    width: 3.5rem;
    height: 3.5rem;
  }
  #maker .console .help_wrap .tooltip {
    width: 55rem;
    height: 38rem;
    bottom: 4rem;
    right: -26.5rem;
  }
  #maker .toul {
    width: 100rem;
  }
  #maker .toul * {
    font-size: 2rem;
  }
  #maker button {
    font-size: 3rem;
    width: 18rem;
    height: 5rem;
    transition: 0.25s;
  }
  #maker button:hover {
    opacity: 0.5;
  }
  #maker button.fontBtn {
    font-size: 3rem;
  }
  #maker button.sizeBtn {
    width: 6rem;
    height: 4rem;
  }
  #maker button.sizeBtn:nth-child(2) {
    font-size: 2.7rem;
  }
  #maker button.sizeBtn:nth-child(3) {
    font-size: 3.3rem;
    font-weight: 700;
  }
  #maker button.patternBtn {
    width: 5rem;
    height: 5rem;
  }
  #maker button.iconBtn {
    width: 7rem;
    height: 7rem;
    flex-grow: 1;
    padding: 0.5rem !important;
  }
  #maker button.iconBtn:nth-child(-n+9)::before {
    top: -0.5rem;
    left: -0.5rem;
    width: 2rem;
    height: 2rem;
  }
  #maker button#deleteIcon {
    width: 5rem;
    height: 5rem;
    padding: 1rem;
    position: relative;
    top: 6rem;
  }
  #maker .pattern_buttons {
    width: 24rem;
  }
  #maker .wrap {
    padding: 1rem;
  }
  #maker .wrap p {
    margin-top: 0rem;
    margin-bottom: 2rem;
  }
  #maker .racer .wrap {
    width: 18rem;
  }
  #maker .racer .wrap.small {
    width: 12.5rem;
  }
  #maker .racer .wrap.large {
    width: 23.5rem;
  }
  #maker .racer .num {
    margin: 1rem 1rem 0;
  }
  #maker .racer .kome {
    padding-top: 1rem;
  }
  #maker .design .wrap {
    width: 13rem;
    text-align: center;
  }
  #maker .design .wrap.large {
    flex-grow: 1;
    text-align: left;
    display: flex;
    justify-content: space-between;
  }
  #maker .stamp .wrap {
    width: 32rem;
  }
  #maker .stamp .wrap.small {
    width: 9rem;
  }
  #maker .stamp .wrap.large {
    width: 46rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  #maker .stamp .wrap.large .flex_b {
    margin: 0 0.5rem;
  }
  #maker .stamp .wrap.large p {
    width: 100%;
  }
  #maker .stamp .wrap button {
    width: 4rem;
    height: 4rem;
  }
  #maker .stamp .wrap button#bringFront, #maker .stamp .wrap button#sendBack {
    width: 13rem;
    font-size: 1.6rem;
  }
  #maker .flex_c {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}/*# sourceMappingURL=banner-maker.css.map */