#pagetitle {
  --urlSP: url(../images/trial/pagetitle_bg_sp.webp);
  --urlPCx1: url(../images/trial/pagetitle_bg.webp);
  --urlPCx2: url(../images/trial/pagetitle_bg@2x.webp);
}

.trial__inner {
  padding-top: calc(100 / var(--spSize) * 100vw);
  padding-left: calc(30 / var(--spSize) * 100vw);
  padding-right: calc(30 / var(--spSize) * 100vw);
  padding-bottom: calc(60 / var(--spSize) * 100vw);
  position: relative;
}

.trial__form__inner {
  padding: calc(20 / var(--spSize) * 100vw) calc(30 / var(--spSize) * 100vw)
    calc(150 / var(--spSize) * 100vw);
}

@media (768px <= width) {
  .trial__inner,
  .trial__form__inner {
    padding-top: 16rem;
    padding-left: max(50% - 60rem, 5rem);
    padding-right: max(50% - 60rem, 5rem);
    padding-bottom: 4rem;
  }
}

.trial__lists__inner {
  padding-top: calc(120 / var(--spSize) * 100vw);
  padding-left: calc(30 / var(--spSize) * 100vw);
  padding-right: calc(30 / var(--spSize) * 100vw);
  padding-bottom: calc(10 / var(--spSize) * 100vw);
  position: relative;
}
@media (768px <= width) {
  .trial__lists__inner {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    /* padding-top: 16rem;
    padding-left: max(50% - 60rem, 5rem);
    padding-right: max(50% - 60rem, 5rem);
    padding-bottom: 4rem; */
  }
}

/* .trial__img_bg {
  height: 35rem;
  background: url(../images/trial/trial_img_bg.webp) center/contain no-repeat;
}

@media (768px <= width) {
  .trial__img_bg {
    background: url(../images/trial/trial_img_bg.webp) center/25rem auto
      no-repeat;
    background: -webkit-image-set(url(../images/trial/trial_img_bg@2x.webp) 2x);
    background: image-set(url(../images/trial/trial_img_bg@2x.webp) 2x)
      center/25rem auto no-repeat;
  }
} */

.trial__img_bg {
  position: relative;
  /* width: 100%; */
  flex: 1;
}

picture img {
  /* position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto; */
}

@media (768px <= width) {
  .trial__img picture img {
    position: absolute;
    top: 97px; /*93px*/
    right: 70px; /*0*/
    bottom: 0;
    left: 0;
    margin: auto;
    width: 25%;
  }
}

.trial__txt {
  /* display: grid; */
  grid-template-columns: 1fr 1fr;
  column-gap: 20px; /*17em*/
  row-gap: 20px; /*3em*/
  padding: 2rem; /*2rem*/
  border-radius: 20px;
  /* height: 9rem; */
  flex: 2;
}

@media (768px <= width) {
  .trial__txt {
    background-color: #e5ecfd;
    display: grid;
    column-gap: 250px; /*17em*/
    row-gap: 20px; /*3em*/
    padding: 20px; /*2rem*/
    height: 30rem; /*26rem*/
  }
}

.trial__txt p {
  font-size: 2.1rem; /*clamp(2.4rem, 2.157rem + 1.22vw, 3.6rem)*/
  font-weight: 600;
  line-height: 1.1;
  color: var(--blue);
}

@media (768px <= width) {
  .trial__txt p {
    font-size: 34px;
    line-height: 1.2;
  }
}

.trial__attention {
  padding-top: 1.5rem;
  margin: 0 auto;
  text-align: center;
  color: var(--blue);
  font-size: 1.3rem;
  line-height: 1.5;
  /* font-size: 1.5rem; */
  /*clamp(1.2rem, 1.126rem + 0.31vw, 1.5rem)*/
}
@media (768px <= width) {
  .trial__attention {
    font-size: 1.5rem;
    line-height: 1.9;
  }
}

.trial__lists__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 2rem;
  column-gap: 2rem;
  justify-items: center;
}

@media (768px <= width) {
  .trial__lists__inner {
    grid-template-columns: repeat(4, 1fr);
    padding-left: max(50% - 60rem, 5rem);
    padding-right: max(50% - 60rem, 5rem);
  }
}

.trial__circle {
  width: calc(300 / var(--spSize) * 100vw); /*150px*/
  height: calc(300 / var(--spSize) * 100vw); /*150px*/
  border-radius: 50%;
  background: #e5ecfd; /*背景色*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.trial__circle__inner {
  /* display: flex; */
}
@media (768px <= width) {
  .trial__circle {
    width: 200px;
    height: 200px;
  }
}

.trial__circle p {
  font-size: 1.5rem;
  line-height: 1.5;
  margin-top: 1rem;
  color: var(--blue);
  font-weight: 600;
  text-align: center;
  font-size: clamp(1.4rem, 1.375rem + 0.1vw, 1.5rem);
}

@media (768px <= width) {
  .trial__lists {
    margin-top: 8rem;
  }
}

.trial__item_icon img {
  width: calc(100 / var(--spSize) * 100vw);
}

@media (768px <= width) {
  .trial__item_icon img {
    width: 7rem;
  }
}

.trial__lead {
  padding-top: calc(120 / var(--spSize) * 100vw);
  padding-left: calc(20 / var(--spSize) * 100vw);
  padding-right: calc(20 / var(--spSize) * 100vw);
  padding-bottom: calc(60 / var(--spSize) * 100vw);
  /* margin: 0 auto; */
  text-align: center;
  font-size: 2rem;
  line-height: 1.5;
  color: var(--blue);
  font-weight: 600;
}

@media (768px <= width) {
  .trial__lead {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 7rem;
  }
}

.trialform__lead {
  margin: 5rem auto 3rem;
  text-align: center;
  font-size: 2.3rem;
  line-height: 1.5;
  color: var(--blue);
  font-weight: 600;
}

@media (768px <= width) {
  .trialform__lead {
    margin: 8rem auto 8rem;
    font-size: 3rem;
  }
}

.trialform__confirm__lead {
  margin: 5rem auto 3rem;
  text-align: center;
  font-size: 2.3rem;
  line-height: 1.5;
  color: var(--blue);
  font-weight: 600;
}

@media (768px <= width) {
  .trialform__confirm__lead {
    margin: 8rem auto 3rem;
    font-size: 3rem;
  }
}

.trialform__comment {
  display: grid;
  width: -moz-max-content;
  width: max-content;
  margin: 3rem auto 1rem;
}

@media (768px <= width) {
  .trialform__comment {
    font-size: 1.5rem;
    line-height: 1.9;
    margin: 3rem auto;
  }
}

.trial__banner {
  margin: 0 auto;
  text-align: center;
  margin-top: 4rem;
}

#trial__message {
  white-space: pre-wrap;
}

/* CSS: フェード用の設定 */
.fade-text {
  transition: opacity 0.5s ease-in-out; /* 0.5秒かけて変化させる */
  opacity: 1;
}

/* 透明な状態 */
.fade-out {
  opacity: 0;
}

.top_trial_button_inner {
  display: grid;
  place-content: center;
}

@media (768px <= width) {
  .top_trial_button_inner {
    justify-content: start;
  }
}

.top_trial_button {
  margin-top: calc(70 / var(--spSize) * 100vw);
  width: calc(600 / var(--spSize) * 100vw);
  position: relative;
  animation: textEffectText 700ms 400ms forwards;
}

.buttom_trial_button {
  margin-top: calc(70 / var(--spSize) * 100vw);
  width: calc(600 / var(--spSize) * 100vw);
  position: relative;
}

@media (768px <= width) {
  .top_trial_button,
  .buttom_trial_button {
    margin-top: 2rem;
    width: 32rem;
  }
}

.top_trial_button a,
.buttom_trial_button {
  color: #fff;
  background-color: var(--blue);
  /* font-size: 1.5rem; */
  font-weight: 700;
  text-align: center;
  height: calc(100 / var(--spSize) * 100vw);
  display: grid;
  place-content: center;
  border-radius: 100rem;
  position: relative;
  /* transition: all 0.5s 0s ease; */
  transition: all var(--speed) ease-in-out;
}

.top_trial_button a:hover,
.buttom_trial_button:hover {
  color: var(--blue);
  background-color: #fff;
  border: 1px solid var(--blue);
}

@media (768px <= width) {
  .top_trial_button a,
  .buttom_trial_button {
    font-size: 1.8rem;
    height: 6.4rem;
  }
}

.top_trial_button:after {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: -5px;
  border-top: solid 1px #fff; /* 好みで色を変えてください */
  border-right: solid 1px #fff; /* 好みで色を変えてください */
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 20px;
}

.top_trial_button:hover:after {
  border-top: solid 2px var(--blue); /* 好みで色を変えてください */
  border-right: solid 2px var(--blue); /* 好みで色を変えてください */
}

@media (768px <= width) {
  .contact__form {
    margin-bottom: 50px;
  }
}

.contact__form [class^=error-]
/*Specificity: (0,2,0)*/ {
  color: #c00;
}

.contact__form [class^="error-"] .icon-error {
  margin-right: 0.5rem;
}

.contact__inner {
  /* padding: calc(120 / var(--spSize) * 100vw) calc(30 / var(--spSize) * 100vw)
    calc(150 / var(--spSize) * 100vw); */
  padding-top: calc(100 / var(--spSize) * 100vw);
  padding-left: calc(30 / var(--spSize) * 100vw);
  padding-right: calc(30 / var(--spSize) * 100vw);
  padding-bottom: calc(60 / var(--spSize) * 100vw);
  position: relative;
}
@media (768px <= width) {
  .contact__inner {
    /* padding: 5.5rem max(50% - 50rem, 5rem) 15rem; */
    padding-top: 4rem;
    padding-left: max(50% - 60rem, 5rem);
    padding-right: max(50% - 60rem, 5rem);
    padding-bottom: 4rem;
  }
}

.contact__form dl {
  /* border-bottom: 1px solid #ccc; */
}
@media (768px <= width) {
  .contact__form dl {
    display: grid;
    grid-template-columns: 25.5fr 74.5fr;
  }
}
.contact__form dt,
.contact__form dd {
  font-size: 1.6rem;
}
.contact__form dt {
  padding: 1.5rem 1.5rem 0.75rem;
  font-weight: 700;
  /* border-top: 1px solid #ccc; */
}
@media (768px <= width) {
  .contact__form dt {
    padding: 3rem 2rem;
    align-self: start;
    /* border-top: 1px solid #ccc; */
  }
}
.contact__form dd {
  padding: 0.75rem 0 3rem;
}
@media (768px <= width) {
  .contact__form dd {
    /* border-top: 1px solid #ccc; */
    padding: 2rem 2rem 2rem;
  }
}
.contact__form dd.radiobutton {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (768px <= width) {
  .contact__form dd.radiobutton {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.form__note {
  font-size: 1.3rem;
  line-height: 1.5;
}

.form__note__annotation {
  margin-left: 1.5rem;
}

.light-gray {
  color: #999;
}

.contact__form dd small.note.zip {
  margin-left: 4rem;
}
.contact__form .required {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contact__form .required::after {
  content: "必須";
  border-radius: 0.2rem;
  font-size: 1.4rem;
  line-height: 144%;
  font-weight: 700;
  background: var(--blue);
  color: #fff;
  width: calc(100 / var(--spSize) * 100vw);
  height: calc(48 / var(--spSize) * 100vw);
  display: grid;
  place-content: center;
}
@media (768px <= width) {
  .contact__form .required::after {
    width: 5rem;
    height: 2.4rem;
  }
}
.contact__form .pref,
.contact__form input[name="address"] {
  margin-top: calc(40 / var(--spSize) * 100vw);
}
@media (768px <= width) {
  .contact__form .pref,
  .contact__form input[name="address"] {
    margin-top: 2rem;
  }
}
.contact__form .pp {
  text-align: center;
  margin-top: calc(120 / var(--spSize) * 100vw);
}
@media (768px <= width) {
  .contact__form .pp {
    margin: 7rem 0 10rem;
  }
}
.contact__form .pp label {
  display: inline-flex;
}
.contact__form .pp a {
  color: var(--blue);
  text-decoration: underline;
}
.contact__form .buttonarea,
.contact__form .btn {
  margin-top: calc(120 / var(--spSize) * 100vw);
}
@media (768px <= width) {
  .contact__form .buttonarea,
  .contact__form .btn {
    margin-top: 8.5rem;
  }
}
.contact__form .buttonarea button,
.contact__form .btn {
  width: 100%;
}
@media (768px <= width) {
  .contact__form .buttonarea button,
  .contact__form .btn {
    width: 40rem;
    margin-left: auto;
    margin-right: auto;
    height: 8rem;
    font-size: 1.8rem;
  }
}

.triale__complete__box .btn {
  margin-top: calc(30 / var(--spSize) * 100vw);
}

@media (768px <= width) {
  .triale__complete__box .btn {
    width: 40rem;
    margin-left: auto;
    margin-right: auto;
    height: 8rem;
    font-size: 1.8rem;
  }
}

.triale__complete__contact__box .btn {
  margin-top: calc(10 / var(--spSize) * 100vw);
}

@media (768px <= width) {
  .triale__complete__contact__box .btn {
    width: 40rem;
    margin-left: auto;
    margin-right: auto;
    height: 8rem;
    font-size: 1.8rem;
  }
}

.contact__form .buttonarea.confirm {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 calc(30 / var(--spSize) * 100vw);
}
@media (768px <= width) {
  .contact__form .buttonarea.confirm {
    grid-template-columns: repeat(2, 32rem);
    gap: 0 2rem;
  }
}
@media (768px <= width) {
  .contact__form .buttonarea.confirm button {
    width: 100%;
  }
}
.contact__form [class^="error-"] {
  color: #c00;
}
.contact__form [class^="error-"] .icon-error {
  margin-right: 0.5rem;
}

body.confirm {
  --clr-placeholder: #fff;
}
body.confirm dt {
  padding: 1.5rem 1.5rem 0.5rem;
}
body.confirm dt.required::after {
  content: none;
}
body.confirm dd {
  padding: 0 1.5rem 1.5rem;
}
@media (768px <= width) {
  body.confirm dd {
    padding: 3rem 2rem;
  }
}
body.confirm .input {
  display: none;
}
body.confirm .select::after {
  content: none;
}
body.confirm select {
  background: none;
  pointer-events: none;
  color: var(--clr-text-light);
}
body.confirm input[type="text"],
body.confirm input[type="zip"],
body.confirm input[type="email"],
body.confirm input[type="tel"],
body.confirm textarea {
  background: none;
  height: auto;
  pointer-events: none;
}
body.confirm textarea {
  resize: none;
}
body.confirm .pp {
  display: none;
}

body:not(.confirm) .confirm {
  display: none !important;
}

.form-group .col1 {
  @media (768px <= width) {
    display: flex;
    justify-content: space-between;
  }
}

.form-group2 .col2 {
  @media (768px <= width) {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
  }
}

.selectpoint_others_input {
  margin-top: 2rem;
}

.countermeasures_others_input {
  /* margin-top: -4rem; */
}

@media (768px <= width) {
  .countermeasures_others_input {
    margin-top: 2rem;
  }
}

.considerpoint_others_input {
  margin-top: 2rem;
}

@media (768px <= width) {
  /* .selectpoint_others_input,
  .countermeasures_others_input,
  .considerpoint_others_input {
    margin-top: -20px;
  } */
}

.contact__inner__bg {
  padding: calc(2 / var(--spSize) * 100vw) calc(20 / var(--spSize) * 100vw)
    calc(2 / var(--spSize) * 100vw);
  border: 1px solid #e5ecfd;
  border-radius: 6px;
}
@media (768px <= width) {
  .contact__inner__bg {
    /* padding: 0; */
    padding-bottom: 5rem;
  }
}

.contact__flow {
  padding: calc(70 / var(--spSize) * 100vw) 0;
  display: flex;
  justify-content: space-between;
}
@media (768px <= width) {
  .contact__flow {
    padding: 7.5rem 0;
    width: 52.5rem;
    margin: 0 auto;
  }
}
.contact__flow .maru {
  width: calc(32 / var(--spSize) * 100vw);
  height: calc(32 / var(--spSize) * 100vw);
  border-radius: 100%;
  background-color: var(--color);
  margin: 0 auto;
}
@media (768px <= width) {
  .contact__flow .maru {
    width: 1.6rem;
    height: 1.6rem;
  }
}
.contact__flow .text {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 144%;
  color: var(--color);
}
.contact__flow__input,
.contact__flow__confirm,
.contact__flow__complete {
  --color: #ccc;
  display: grid;
  gap: 1.5rem 0;
}
.contact__flow__input.current,
.contact__flow__confirm.current,
.contact__flow__complete.current {
  --color: var(--blue);
}
.contact__flow__confirm .maru,
.contact__flow__complete .maru {
  position: relative;
}
.contact__flow__confirm .maru::before,
.contact__flow__complete .maru::before {
  content: "";
  width: 40vw;
  height: 1px;
  border-top: 1px dotted #ccc;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateX(-100%);
  z-index: -1;
}
@media (768px <= width) {
  .contact__flow__confirm .maru::before,
  .contact__flow__complete .maru::before {
    width: 23.4rem;
  }
}
.contact__form dl {
  /* border-bottom: 1px solid #ccc; */
}
@media (768px <= width) {
  .contact__form dl {
    display: grid;
    grid-template-columns: 25.5fr 74.5fr;
  }
}

@media (768px <= width) {
  .confirm_line dt {
    border-top: 1px solid #ccc;
  }

  .confirm_line dd {
    border-top: 1px solid #ccc;
  }

  .confirm_line .line-none {
    border: none;
    margin-top: -20px;
  }
}

/* .contact__form dt,
.contact__form dd {
  font-size: 1.6rem;
}
.contact__form dt {
  padding: 1.5rem 1.5rem 0.75rem;
  font-weight: 700;
  border-top: 1px solid #ccc;
}
@media (768px <= width) {
  .contact__form dt {
    padding: 3rem 2rem;
    align-self: start;
    border-top: 1px solid #ccc;
  }
}
.contact__form dd {
  padding: 0.75rem 0 3rem;
}
@media (768px <= width) {
  .contact__form dd {
    border-top: 1px solid #ccc;
    padding: 2rem 2rem 2rem;
  }
} */

.selectpoint {
  padding-bottom: 0.1rem;
}

@keyframes textEffectText {
  0% {
    color: rgba(255, 255, 255, 0);
    translate: 0 2rem;
  }
  100% {
    color: white;
    translate: 0 0;
  }
}

.trial_bottom_button {
  color: var(--blue);
  color: #fff;
  overflow: hidden;
  display: grid;
  place-content: center;
  height: calc(100 / var(--spSize) * 100vw);
  border-radius: 100rem;
  position: relative;
}

@media (768px <= width) {
  .trial_bottom_button {
    font-size: 1.6rem;
    height: 6.4rem;
  }
}

.trial__mv {
  display: flex;
  flex-direction: row-reverse;
}

@media (768px <= width) {
  .trial__mv {
    display: block;
  }
}

/* @media (width < 768px) {
  .pc {
    display: none;
  }
  .pc.important {
    display: none !important;
  }
} */

/* 768px未満（スマホ用） */
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
  .pc.important {
    display: none !important;
  }
}

/* 768px以上（PC用） */
@media screen and (min-width: 768px) {
  .sp {
    display: none;
  }
  .sp.important {
    display: none !important;
  }
}

/* @media (768px <= width) {
  .sp {
    display: none;
  }
  .sp.important {
    display: none !important;
  }
} */

.trial__annotation {
  text-align: center;
  padding-top: calc(20 / var(--spSize) * 100vw);
  padding-bottom: calc(60 / var(--spSize) * 100vw);
}

@media (768px <= width) {
  .trial__annotation {
    margin-top: 3.5rem;
    padding: 0;
  }
}

ul.form__note {
  padding-top: calc(20 / var(--spSize) * 100vw);
}

@media (768px <= width) {
  ul.form__note {
    padding-top: 1rem;
  }
}

.form__must {
  padding: 3rem 2rem 0;
}

.underline {
  background: linear-gradient(transparent 60%, yellow 30%);
  display: inline-block;
}

.contact__form [class^="error-"] {
  color: #c00;
}
.contact__form [class^="error-"] .icon-error {
  margin-right: 0.5rem;
}

body.confirm {
  --clr-placeholder: #fff;
}
body.confirm dt {
  padding: 1.5rem 1.5rem 0.5rem;
}
body.confirm dt.required::after {
  content: none;
}
body.confirm dd {
  padding: 0 1.5rem 1.5rem;
}
@media (768px <= width) {
  body.confirm dd {
    padding: 3rem 2rem;
  }
  body.confirm dd.selectpoint_others {
    padding: 1rem 0 0;
  }
}

.section__text {
  display: grid;
}

@media (768px <= width) {
  .section__text {
    font-size: 1.5rem;
    line-height: 1.9;
    width: -moz-max-content;
    width: max-content;
    margin: 0 auto;
  }
}

.others_input {
  margin: -3rem auto;
}

.pr__box_ {
  margin-top: 10rem;
}

.pr__box__inner {
  display: flex;
  margin: 5rem auto 3rem;
  text-align: center;
}

.pr__box__inner_box {
  flex: 1;
  gap: 2rem;
  width: 40%;
}

.triale__complete__box {
  text-align: center;
}

.trial__complete__block {
  display: grid;
  gap: calc(180 / var(--spSize) * 100vw) 0;
  margin-top: calc(50 / var(--spSize) * 100vw);
}

@media (768px <= width) {
  .trial__complete__block {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 12rem;
    margin-top: 4rem;
  }
}

.triale__complete__box {
  padding-top: calc(20 / var(--spSize) * 100vw);
  padding-left: calc(20 / var(--spSize) * 100vw);
  padding-right: calc(20 / var(--spSize) * 100vw);
  padding-bottom: calc(5 / var(--spSize) * 100vw);
  position: relative;
}

.triale__complete__contact__box {
  background-color: #e5ecfd;
  border-radius: 5px;
  margin-top: 10rem;
  padding: 4rem 2rem;
}

.detail_btn {
  /* background-color: #333;
  width: 30%;
  color: white;
  margin: 10px; */
}
.pr__box_detail {
  flex-grow: 1;
}

.error-countermeasures {
  margin-top: 50px;
}

@media (768px <= width) {
  .error-countermeasures {
    margin-top: 0px;
  }
}