:root {
  --color_brand-blue: #00A6E2;
  --color_blue-5: #0C6CDE;
  --color_gray-5: #999999;
  --color_gray-4: #CCCCCC;
  --color_white: #FFFFFF;
  --color_white-fix: #FFFFFF;
}


/* ========================================
   CHECK BOX
======================================== */

.schoolgroup-reservation__action {
  margin: 48px 0 0 0;
}

.schoolgroup-reservation__checkbox .gr-input--checkbox {
  margin: 32px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.schoolgroup-reservation__eticket {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 24px 0 0;
}


.schoolgroup-reservation__eticket p {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--color_blue-5);
  font-weight: 700;
  margin: 0 0 15px;
}

.schoolgroup-reservation__eticket p::before,
.schoolgroup-reservation__eticket p::after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin: 0 8px;
}

.schoolgroup-reservation__eticket p::before {
  background-image: url(/assets/img/info/group/line-left.svg);
}

.schoolgroup-reservation__eticket p::after {
  background-image: url(/assets/img/info/group/line-right.svg);
}

.schoolgroup-reservation__eticket p.is-disabled {
  color: var(--color_gray-4);
}

.schoolgroup-reservation__eticket p.is-disabled::before {
  background-image: url(/assets/img/info/group/line-left-gray.svg);
}

.schoolgroup-reservation__eticket p.is-disabled::after {
  background-image: url(/assets/img/info/group/line-right-gray.svg);
}

.schoolgroup-reservation__button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 19px;
}

.schoolgroup-reservation__button .gr-button.is-disabled a {
  background-color: var(--color_gray-4);
  pointer-events: none;
}

.schoolgroup-reservation__button .gr-button.is-disabled a:hover {
  transition: none;
}


/* ========================================
  Text
======================================== */

.gr-text {
  font-size: 1.6rem;
  line-height: 1.8;
}

.gr-text.is-center {
  text-align: center;
}


/* ========================================
  Checkbox
======================================== */

.gr-input--checkbox input {
  display: none;
}

.gr-input--checkbox label {
  position: relative;
  padding: 0 0 0 36px;
  font-size: 1.6rem;
  line-height: 1.4;
  cursor: pointer;
}

.gr-input--checkbox.is-large label {
  font-size: 1.8rem;
  font-weight: 700;
}

.gr-input--checkbox label::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  border: 2px solid var(--color_gray-5);
  background-color: var(--color_white);
  border-radius: 4px;
}

.gr-input--checkbox label::after {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background-color: color-mix(in srgb, var(--color_gray-5) 15%, transparent);
  position: absolute;
  top: -8px;
  left: -8px;
  z-index: 1;
  transition: .3s;
  transform: scale(0.5);
}

.gr-input--checkbox input:checked + label::before {
  border: none;
  background-color: var(--color_brand-blue);
  background-image: url(/assets/img/common/icon_check-white.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px;
}

.gr-input--checkbox input:checked + label::after {
  background-color: color-mix(in srgb, var(--color_brand-blue) 15%, transparent);
}


/* ========================================
  Button
======================================== */

.gr-button {
  width: 100%;
  position: relative;
  border-radius: 100px;
  overflow: hidden;
}

.gr-button::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-image: url(/assets/img/common/arrow-dot_right-blue.svg);
  background-repeat: repeat-x;
  background-position: left 0 center;
  background-size: 20px;
  position: absolute;
  top: 50%;
  right: 16px;
  margin: -10px 0 0;
  z-index: 3;
}

.gr-button a,
.gr-button input {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  border: 2px solid var(--color_brand-blue);
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--color_brand-blue);
  padding: 8px 40px;
  position: relative;
  font-weight: 700;
  z-index: 2;
  border-radius: 100px;
  text-align: center;
  background-color: var(--color_white);
}

.gr-button.is-blue a,
.gr-button.is-blue input {
  background-color: rgba(0, 0, 0, 0);
}

.gr-button.is-blue::before {
  background-image: url(/assets/img/common/arrow-dot_right-white.svg);
}

.gr-button.is-blue::after {
  content: "";
  display: block;
  width: 200%;
  height: 100%;
  background: linear-gradient(to right, #2EB8E4, #2EB8E4, 80%, #0C9AFF);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  transition: .3s;
}

.gr-button.is-blue a {
  border: none;
  color: var(--color_white-fix);
}

.gr-button.is-blank::before {
  background-image: url(/assets/img/common/icon_blank-brand-blue.svg);
}

.gr-button.is-blue.is-blank::before {
  background-image: url(/assets/img/common/icon_blank-white.svg);
}


/* ========================================
  Responsive
======================================== */

@media screen and (min-width: 768px) {
  .schoolgroup-reservation__checkbox .gr-input--checkbox {
    margin: 32px auto 0;
  }

  .schoolgroup-reservation__eticket {
    margin: 40px 0 0;
  }

  .gr-button {
    max-width: 400px;
  }

  .gr-button a,
  .gr-button input {
    max-width: 400px;
    min-height: 60px;
    font-size: 1.6rem;
    line-height: 1.5;
    transition: .3s;
  }
}

@media screen and (min-width: 1024px) {
  .schoolgroup-reservation {
    margin: 80px 0 0 0;
  }

  .schoolgroup-reservation__checkbox .gr-input--checkbox {
    margin: 32px auto 0;
  }

  .gr-input--checkbox label:hover::after {
    transform: scale(1);
  }

  .gr-button:hover::before {
    background-position: left 20px center;
    transition: .3s;
  }

  .gr-button.is-blue:hover::after {
    right: -100%;
  }

  .gr-button.is-anchor:hover::before {
    background-position: left 0 top 20px;
  }
}