@charset "UTF-8";
/* コンテンツ最大幅 */
/* color */
/* ============================================ */
/* font */
/* ============================================ */
footer .ticket {
  display: none;
}

/* main visual */
/* ============================================ */
.main-title-bg.is-figure-webket img {
  object-position: center 5%;
}
@media all and (max-width: 896px) {
  .main-title-bg.is-figure-webket img {
    object-position: 36% center;
  }
}

/* webket */
/* ============================================ */
/*body.webket main {
  padding-bottom: 220px;
  @include g.landscape {
    padding-bottom: 160px;
  }
}*/
/* top: promo + tab */
/* ============================================ */
.webket-top {
  position: relative;
  z-index: 2;
  padding-block: 40px 128px;
}
@media all and (max-width: 896px) {
  .webket-top {
    padding-block: 24px 64px;
  }
}
.webket-top .inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
@media all and (max-width: 896px) {
  .webket-top .inner {
    gap: 24px;
  }
}

.webket-promo {
  display: flex;
  gap: 64px;
  padding: 64px;
  border-radius: 32px;
  background: #222;
}
@media all and (max-width: 896px) {
  .webket-promo {
    flex-direction: column;
    gap: 24px;
    padding: 20px;
    border-radius: 20px;
  }
}
.webket-promo-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1 0 0;
  min-width: 0;
}
.webket-promo-ttl {
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1;
  color: #fff;
}
@media all and (max-width: 896px) {
  .webket-promo-ttl {
    line-height: 1.4;
  }
}
.webket-promo-txt {
  font-size: 1.6rem;
  line-height: 1.6;
  color: #fff;
}
@media all and (max-width: 896px) {
  .webket-promo-txt {
    font-size: 1.4rem;
  }
}
.webket-promo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: 16px;
}
.webket-promo-card img {
  width: 140px;
}
.webket-promo-card p {
  font-size: 1.5rem;
  color: #fff;
  text-align: center;
}

.note-list.is-bg li {
  color: #4b5563;
}
.note-list.is-bg.is-alert {
  background: #fff;
  border: 2px solid #ef4444;
}
.note-list.is-bg.is-alert li {
  color: #222;
}
.note-list.is-bg.is-alert li::before {
  color: #ef4444;
}

/* tab */
/* ============================================ */
.webket-tab {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
}

.webket-tab-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.webket-tab-input:focus-visible + .webket-tab-label {
  outline: 2px solid #278a57;
  outline-offset: 2px;
}
.webket-tab-input:checked + .webket-tab-label {
  border-color: #15803d;
  background: #15803d;
  color: #fff;
}
.webket-tab-input:checked + .webket-tab-label .sub {
  color: #fff;
}

.webket-tab-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 0 0;
  gap: 4px;
  padding: 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px 8px 0 0;
  background: #f3f4f6;
  color: #222;
  font-weight: 700;
  font-size: 1.8rem;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
}
@media all and (max-width: 896px) {
  .webket-tab-label {
    font-size: 1.6rem;
  }
}
.webket-tab-label .sub {
  font-size: 1.4rem;
  color: #222;
}
@media all and (max-width: 896px) {
  .webket-tab-label .sub {
    font-size: 1.2rem;
  }
}

.webket-tab-panel {
  display: none;
  flex-direction: column;
  gap: 64px;
  width: 100%;
  padding: 48px 64px;
  border: 2px solid #278a57;
  border-radius: 0 0 16px 16px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
@media all and (max-width: 896px) {
  .webket-tab-panel {
    gap: 24px;
    padding: 20px;
  }
}

#webket-tab-1:checked ~ #webket-panel-1,
#webket-tab-2:checked ~ #webket-panel-2 {
  display: flex;
}

.webket-dummy {
  padding: 40px;
  color: #9ca3af;
  text-align: center;
}

/* step */
/* ============================================ */
.webket-step-block {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}
@media all and (max-width: 896px) {
  .webket-step-block {
    gap: 24px;
  }
}

.webket-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.webket-step li {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px dashed #e5e7eb;
}
.webket-step .num {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #222;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
}
.webket-step .ico {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
}
.webket-step .ico img {
  max-width: 50px;
  max-height: 50px;
}
.webket-step .txt {
  flex: 1 0 0;
  min-width: 0;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #1f2937;
}

.webket-link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 24px;
  border-radius: 8px;
  background: #15803d;
  color: #fff;
  font-weight: 700;
  font-size: 2rem;
  text-align: center;
  transition: 0.3s;
}
@media (hover: hover) {
  .webket-link-btn:hover {
    opacity: 0.8;
  }
}

.webket-movie iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

/* notice */
/* ============================================ */
.webket-notice {
  padding-block: 64px;
  background: #278a57;
}
.webket-notice .inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
@media all and (max-width: 896px) {
  .webket-notice .inner {
    gap: 40px;
  }
}

.webket-notice-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}
.webket-notice-list li {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
}
.webket-notice-list .num {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: #278a57;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
}
.webket-notice-list .txt {
  flex: 1 0 0;
  min-width: 0;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #fff;
}
@media all and (max-width: 896px) {
  .webket-notice-list .txt {
    font-size: 1.4rem;
  }
}

.webket-contact {
  display: flex;
  gap: 16px;
}
@media all and (max-width: 896px) {
  .webket-contact {
    flex-direction: column;
  }
}
.webket-contact > div {
  flex: 1 0 0;
  padding: 24px 40px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: #fff;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.04);
}
@media all and (max-width: 896px) {
  .webket-contact > div {
    padding: 24px;
  }
}
.webket-contact .ttl {
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 2.4rem;
  color: #278a57;
}
@media all and (max-width: 896px) {
  .webket-contact .ttl {
    font-size: 2rem;
  }
}
.webket-contact .txt {
  font-size: 1.8rem;
  color: #222;
}
@media all and (max-width: 896px) {
  .webket-contact .txt {
    font-size: 1.4rem;
  }
}

/* faq */
/* ============================================ */
.webket-faq {
  padding-top: 128px;
  padding-bottom: 64px;
}
@media all and (max-width: 896px) {
  .webket-faq {
    padding-top: 64px;
    padding-bottom: 40px;
  }
}
.webket-faq .inner {
  max-width: 960px;
}
.webket-faq .block-ttl {
  margin-bottom: 64px;
}
@media all and (max-width: 896px) {
  .webket-faq .block-ttl {
    margin-bottom: 24px;
  }
}

.webket-faq-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.webket-faq-list > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eee;
}
@media all and (max-width: 896px) {
  .webket-faq-list > div {
    gap: 8px;
  }
}
.webket-faq-list dt,
.webket-faq-list dd {
  display: flex;
  align-items: center;
  gap: 16px;
}
.webket-faq-list .num {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #222;
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
}
.webket-faq-list dd .num {
  background: #278a57;
}
.webket-faq-list dt .txt {
  font-weight: 700;
}
.webket-faq-list .txt {
  flex: 1 0 0;
  min-width: 0;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #1f2937;
}
@media all and (max-width: 896px) {
  .webket-faq-list .txt {
    font-size: 1.4rem;
  }
}

/* fixed bar */
/* ============================================ */
.webket-fixedbar {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding: 20px 16px;
  background: #222;
}
@media all and (max-width: 896px) {
  .webket-fixedbar {
    padding: 12px 16px;
  }
}
.webket-fixedbar-txt {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  justify-content: center;
  font-weight: 700;
  font-size: 1.8rem;
  color: #fff;
}
@media all and (max-width: 896px) {
  .webket-fixedbar-txt {
    gap: 8px;
    font-size: 1.4rem;
  }
}
.webket-fixedbar-txt .arrow {
  width: 14px;
}
.webket-fixedbar-txt .arrow.is-right {
  rotate: 180deg;
  scale: 1 -1;
}
.webket-fixedbar-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: 100%;
}
@media all and (max-width: 896px) {
  .webket-fixedbar-btns {
    gap: 8px;
  }
}
.webket-fixedbar-btns a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 330px;
  height: 68px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.8rem;
  text-align: center;
  line-height: 1.4;
  transition: 0.3s;
}
@media all and (max-width: 896px) {
  .webket-fixedbar-btns a {
    width: calc((100% - 8px) / 2);
    height: 50px;
    font-size: 1.6rem;
  }
}
.webket-fixedbar-btns a span {
  font-size: 1.2rem;
}
@media all and (max-width: 896px) {
  .webket-fixedbar-btns a span {
    font-size: 1.1rem;
  }
}
@media (hover: hover) {
  .webket-fixedbar-btns a:hover {
    opacity: 0.8;
  }
}
.webket-fixedbar-btns a.is-pass {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #4b5563;
}
@media all and (max-width: 896px) {
  .webket-fixedbar-btns a.is-pass {
    width: 100%;
  }
}
.webket-fixedbar-btns a.is-new {
  border: 1px solid #2f7d4f;
  background: #2f7d4f;
  color: #fff;
}
.webket-fixedbar-btns a.is-charge {
  border: 1px solid #1a7c6b;
  background: #288777;
  color: #fff;
}

/*# sourceMappingURL=webket.css.map */