@charset "UTF-8";
.trial p {
  color: #5e5248;
}
.trial .eraberu {
  color: #5e5248;
  line-height: 1.3rem;
  margin: 0px 15px;
}
.trial .ao {
  color: #3a9ef3;
}
.trial .midori {
  color: #51cb30;
}
.trial .green {
  color: #1facb6;
}
.trial .green02 {
  color: #1c869d;
}
.trial .aka {
  color: #ff6600;
}
.trial .orange {
  color: #ff9000;
}
.trial .bg-orange {
  background: #ffc494;
  padding: 3px;
}

/* pc */
@media screen and (min-width: 961px) {
  /*ここにpc用スタイルを記述*/
  .trial .q {
    background: #ffe1b9;
    color: #5e5248;
    font-weight: 700;
    border-radius: 3px;
    font-size: 25px;
    margin: 0px 15px;
    padding: 10px 10px 20px 10px;
  }
  .trial .q::before {
    content: "Q";
    font-family: "makinas-4-flat";
    color: #ff7800;
    font-weight: 100;
    font-size: 60px;
    position: relative;
    top: 13px;
    margin: 0 20px 0 0;
  }
  .trial .a {
    display: flex;
  }
  .trial .a .a1 {
    font-family: "makinas-4-flat";
    background: #ff9000;
    color: #fff;
    font-weight: 100;
    font-size: 60px;
    border-radius: 3px;
    padding: 18px 0 0 10px;
    margin: 25px 15px 15px 15px;
    width: 65px;
    height: 65px;
  }
  .trial .a .a2 {
    color: #5e5248;
    font-weight: 700;
    font-size: clamp(1.375rem, -1.962rem + 5.56vw, 1.563rem);
    padding: 45px 10px 0 0;
    width: calc(100% - 102px);
  }
  .trial .a .a2-2 {
    color: #5e5248;
    font-weight: 700;
    font-size: clamp(1.375rem, -1.962rem + 5.56vw, 1.563rem);
    padding: 25px 10px 0 0;
    width: calc(100% - 102px);
  }
  .trial .a3 {
    color: #5e5248;
    font-size: 20px;
    font-weight: 700;
    padding: 0px 20px 50px 95px;
  }
  .trial .messe {
    position: relative;
  }
  .trial .messe .sonohoka {
    position: absolute;
    top: clamp(2.438rem, -4.236rem + 11.11vw, 2.813rem);
    left: clamp(3.688rem, -5.211rem + 14.81vw, 4.188rem);
    font-size: clamp(1.125rem, 0.013rem + 1.85vw, 1.188rem);
    line-height: clamp(2.063rem, -0.162rem + 3.7vw, 2.188rem);
  }
  .trial .messe .shochu {
    position: absolute;
    top: clamp(24.125rem, -13.692rem + 62.96vw, 26.25rem);
    left: 0;
    font-size: clamp(1.125rem, 0.013rem + 1.85vw, 1.188rem);
    line-height: clamp(2.375rem, -0.962rem + 5.56vw, 2.563rem);
    padding-left: clamp(5.375rem, -3.523rem + 14.81vw, 5.875rem);
    padding-right: clamp(4.25rem, -3.536rem + 12.96vw, 4.688rem);
  }
  .trial .messe .ichido {
    position: absolute;
    bottom: clamp(14.063rem, -9.295rem + 38.89vw, 15.375rem);
    right: clamp(4.375rem, -2.299rem + 11.11vw, 4.75rem);
    font-size: clamp(1.125rem, -1.1rem + 3.7vw, 1.25rem);
  }
}
/* smartPhone */
@media screen and (max-width: 960px) {
  /*ここにスマホ用スタイルを記述*/
  .trial .q {
    background: #ffe1b9;
    color: #5e5248;
    font-weight: 700;
    border-radius: 3px;
    font-size: clamp(0.875rem, 0.434rem + 1.88vw, 1.563rem);
    margin: 0px 15px;
    padding-top: clamp(0rem, -0.401rem + 1.71vw, 0.625rem);
    padding-right: 10px;
    padding-bottom: clamp(0.313rem, -0.288rem + 2.56vw, 1.25rem);
    padding-left: 10px;
  }
  .trial .q::before {
    content: "Q";
    font-family: "makinas-4-flat";
    color: #ff7800;
    font-weight: 100;
    font-size: clamp(2.5rem, 1.699rem + 3.42vw, 3.75rem);
    position: relative;
    top: clamp(0.5rem, 0.3rem + 0.85vw, 0.813rem);
    margin-right: clamp(0.313rem, -0.288rem + 2.56vw, 1.25rem);
  }
  .trial .a {
    display: flex;
  }
  .trial .a .a1 {
    font-family: "makinas-4-flat";
    background: #ff9000;
    color: #fff;
    font-weight: 100;
    font-size: clamp(2.5rem, 1.699rem + 3.42vw, 3.75rem);
    border-radius: 3px;
    padding-top: clamp(0.625rem, 0.304rem + 1.37vw, 1.125rem);
    padding-left: 10px;
    margin: 25px 15px 15px 15px;
    width: clamp(3.125rem, 2.524rem + 2.56vw, 4.063rem);
    height: clamp(3.125rem, 2.524rem + 2.56vw, 4.063rem);
  }
  .trial .a .a2 {
    color: #5e5248;
    font-weight: 700;
    font-size: clamp(0.875rem, 0.434rem + 1.88vw, 1.563rem);
    padding-top: clamp(1.875rem, 1.274rem + 2.56vw, 2.813rem);
    padding-right: clamp(0rem, -0.401rem + 1.71vw, 0.625rem);
    padding-left: 0;
    width: calc(100% - 102px);
    line-height: clamp(1.25rem, 0.849rem + 1.71vw, 1.875rem);
  }
  .trial .a .a2-2 {
    color: #5e5248;
    font-weight: 700;
    font-size: clamp(0.875rem, 0.434rem + 1.88vw, 1.563rem);
    padding-top: clamp(1.25rem, 1.05rem + 0.85vw, 1.563rem);
    padding-right: clamp(0rem, -0.401rem + 1.71vw, 0.625rem);
    padding-left: 0;
    width: calc(100% - 102px);
    line-height: clamp(1.25rem, 0.849rem + 1.71vw, 1.875rem);
  }
  .trial .a3 {
    color: #5e5248;
    font-size: clamp(0.875rem, 0.635rem + 1.03vw, 1.25rem);
    font-weight: 700;
    padding-top: 0;
    padding-right: 20px;
    padding-bottom: 50px;
    padding-left: clamp(5rem, 4.399rem + 2.56vw, 5.938rem);
  }
  .trial .messe {
    position: relative;
  }
  .trial .messe .sonohoka {
    position: absolute;
    top: clamp(1.188rem, -0.655rem + 7.86vw, 4.063rem);
    left: clamp(1.938rem, -0.506rem + 10.43vw, 5.75rem);
    font-size: clamp(0.625rem, -0.016rem + 2.74vw, 1.625rem);
    line-height: clamp(1.188rem, 0.066rem + 4.79vw, 2.938rem);
  }
  .trial .messe .shochu {
    position: absolute;
    top: clamp(13.75rem, -0.313rem + 60vw, 35.688rem);
    left: 0;
    font-size: clamp(0.688rem, 0.127rem + 2.39vw, 1.563rem);
    line-height: clamp(1.375rem, 0.093rem + 5.47vw, 3.375rem);
    padding-left: clamp(3.063rem, -0.103rem + 13.5vw, 8rem);
    padding-right: clamp(3.063rem, 0.298rem + 11.79vw, 7.375rem);
    letter-spacing: clamp(-0.063rem, -0.103rem + 0.17vw, 0rem);
  }
  .trial .messe .ichido {
    position: absolute;
    bottom: clamp(7.5rem, -1.314rem + 37.61vw, 21.25rem);
    right: clamp(2.25rem, -0.635rem + 12.31vw, 6.75rem);
    font-size: clamp(0.688rem, 0.046rem + 2.74vw, 1.688rem);
  }
}/*# sourceMappingURL=trial.css.map */