@import url(./_variable.css);

/* top-mv */
/* ============================================ */

.top-mv__img {
  img {
    width: 100%;
    max-width: none;
  }
}

/* top-about */
/* ============================================ */
.top-about {
  position: relative;
  background: #fff;
  padding: 0 0 calc((280 / 1920) * 100vw);
  @media (width <= 480px) {
    padding: 0 0 calc((64 / 375) * 100vw);
  }
}
.top-about__inner {
  padding-bottom: 16px;
  position: relative;
  z-index: 10;
}
.top-about__title-wrap {
  position: relative;
  text-align: center;
}
.top-about__ttl {
  margin-inline: calc(50% - 50vw);
  img {
    width: 100%;
    max-width: none;
  }
}
.top-about__date {
  width: 50%;
  max-width: 685px;
  margin-inline: auto;
  margin-top: 40px;
  @media (width <= 896px) {
    width: 72%;
    margin-top: 16px;
  }
  @media (width <= 480px) {
    width: 100%;
  }
}
.top-about__lead {
  margin-top: 48px;
  font-size: clamp(1.6rem, 0.2824rem + 1.4706vw, 2.4rem); /* 24~16(1440~896) */
  font-weight: 500;
  line-height: 2.4;
  word-break: keep-all;
  text-align: center;
  color: var(--font_c);
  @media (width <= 896px) {
    margin-top: 16px;
  }
}
.top-about__bottom {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  img {
    width: 100%;
    max-width: none;
  }
}
.top-about__line {
  width: 100%;
  position: absolute;
  bottom: calc((30 / 1920) * 100vw);
  left: 0;
  z-index: 5;
  @media (width <= 480px) {
    bottom: calc((-4 / 375) * 100vw);
  }
  img {
    width: 100%;
    max-width: none;
  }
}

/* top-attraction (dark wrapper) */
/* ============================================ */
.top-attraction {
  filter: drop-shadow(0 -10px 40px color-mix(in srgb, #000 20%, transparent));
}
.top-attraction__wrap {
  padding-top: calc((280 / 1920) * 100vw);
  margin-top: calc((-280 / 1920) * 100vw);
  padding-bottom: calc((208 / 1920) * 100vw);
  position: relative;
  background: linear-gradient(215deg, var(--point_c) 15.16%, var(--main_c) 96.37%);
  mask-image: url("../images/bg_01.svg");
  mask-size: 100% auto;
  mask-repeat: no-repeat;
  mask-position: top center;
  @media (width <= 480px) {
    padding-top: calc((56 / 375) * 100vw);
    margin-top: calc((-56 / 375) * 100vw);
    mask-image: url("../images/bg_01_sp.svg");
  }
}
.top-attraction__bottom {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  img {
    width: 100%;
    max-width: none;
  }
}


/* top-otoraction */
/* ============================================ */
.top-otoraction {
  padding-top: 80px;
  position: relative;
  @media (width <= 896px) {
    padding-top: 24px;
  }
}
.top-otoraction__bg {
  mix-blend-mode: screen;
  position: absolute;
  img {
    width: 100%;
    max-width: none;
  }
  &.--left {
    width: min(708px, calc((708 / 1920) * 100vw));
    top: 0;
    left: 0;
    @media (width <= 480px) {
      width: calc((240 / 375) * 100vw);
      top: calc((160 / 375) * 100vw)
    }
  }
  &.--right {
    width: min(725px, calc((725 / 1920) * 100vw));
    top: 0;
    right: 0;
    @media (width <= 480px) {
      width: calc((204 / 375) * 100vw);
      top: calc((64 / 375) * 100vw)
    }
  }
}
.top-otoraction__wrap {
  position: relative;
  z-index: 10;
}
.top-otoraction__circle {
  width: 100%;
  > img {
    width: 100%;
    height: auto;
    display: block;
  }
}
.top-otoraction__inner {
  text-align: center;
  padding: 64px 0 48px;
  @media (width <= 896px) {
    padding: 20px 0;
  }
}
.top-otoraction__logo {
  width: calc((600 / 1440) * 100%);
  max-width: 600px;
  margin-inline: auto;
  @media (width <= 600px) {
    width: min(335px, 100%);
  }
  > img {
    width: 100%;
    max-width: none;
  }
}
.top-otoraction__sub {
  word-break: keep-all;
  margin-top: 40px;
  color: #fff;
  text-shadow: 0 0 20px #ff4fbf;
  font-size: clamp(2rem, 0.0235rem + 2.2059vw, 3.2rem); /* 32~20(1440~896) */
  font-weight: 500;
  line-height: 2;
  @media (width <= 896px) {
    margin-top: 24px;
    line-height: 1.8;
  }
}
.top-otoraction__sub .txt_large {
  font-size: 1.5em;
  font-weight: 900;
}
.top-otoraction__img {
  margin-top: 48px;
  margin-inline: auto;
  width: 100%;
  max-width: 885px;
  @media (width <= 896px) {
    margin-top: 32px;
  }
  img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    @media (width <= 896px) {
      border-radius: 8px;
    }
  }
}

/* top-ride */
/* ============================================ */
.top-ride {
  padding-top: 100px;
  position: relative;
  @media (width <= 896px) {
    padding-top: 40px;
  }
}
.top-ride__bg {
  mix-blend-mode: screen;
  position: absolute;
  img {
    width: 100%;
    max-width: none;
  }
  &.--left {
    width: min(570px, calc((570 / 1920) * 100vw));
    top: min(995px, calc((995 / 1920) * 100vw));
    left: 0;
    @media (width <= 480px) {
      width: calc((240 / 375) * 100vw);
      top: calc((1500 / 375) * 100vw)
    }
  }
  &.--right {
    width: min(589px, calc((589 / 1920) * 100vw));
    top: min(503px, calc((503 / 1920) * 100vw));
    right: 0;
    @media (width <= 480px) {
      width: calc((204 / 375) * 100vw);
      top: calc((220 / 375) * 100vw)
    }
  }
}
.top-ride__bg__sp {
  mix-blend-mode: screen;
  position: absolute;
  img {
    width: 100%;
    max-width: none;
  }
  &.--left {
    width: calc((240 / 375) * 100vw);
    left: 0;
    bottom: calc((12 / 375) * 100vw);
  }
  &.--right {
    width: calc((204 / 375) * 100vw);
    right: 0;
    bottom: calc((730 / 375) * 100vw);
  }
}

.top-ride__wrap {
  max-width: 1720px;
  position: relative;
  z-index: 10;
}

/* ride card (共通) */
.top-ride-card {
  container-type: inline-size;
  position: relative;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  box-shadow: 15px 15px 50px 0px rgba(12, 22, 39, 0.15);
  overflow: hidden;
  margin-top: 48px;
  @media (width <= 896px) {
    border-radius: 16px;
    box-shadow: 10px 10px 50px 0px rgba(12, 22, 39, 0.15);
    margin-top: 24px;
  }
  +.top-ride-card {
    margin-top: 80px;
    @media (width <= 896px) {
      margin-top: 24px;
    }
  }
}
.top-ride-card__wave {
  position: absolute;
  bottom: 0;
  width: calc((455 / 1440) * 100cqw);
  img {
    width: 100%;
    max-width: none;
  }
  &.top-ride-card__wave__01 {
    right: 0;
  }
  &.top-ride-card__wave_02 {
    left: 0;
  }
}
.top-ride-card__logo {
  width: calc((407 / 1440) * 100cqw);
  position: absolute;
  top: 30px;
  left: calc((25 / 1440) * 100cqw);
  z-index: 10;
  pointer-events: none;
  > img {
    width: 100%;
    max-width: none;
  }
  @media (width <= 896px) {
    width: calc((160 / 335) * 100cqw);
    top: 16px;
    left: 0;
  }
}
.top-ride-card__wrap {
  padding: 96px calc((96 / 1440) * 100cqw);
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 1;
  @media (width <= 896px) {
    padding: 24px 24px 32px;
  }
}
.top-ride-card__container {
  display: flex;
  gap: calc((64 / 1440) * 100cqw);
  align-items: center;
  @media (width <= 1025px) {
    flex-direction: column;
    gap: 24px;
  }
  @media (width <= 896px) {
    gap: 16px;
  }
}
.top-ride-card__img {
  flex: 0 0 55%;
  align-self: stretch;
  > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    @media (width <= 896px) {
      aspect-ratio: 287 / 203;
      border-radius: 8px;
    }
  }
  @media (width <= 1025px) {
    flex: none;
    width: 100%;
    align-self: auto;
  }
}
.top-ride-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 17px;
  @media (width <= 1025px) {
    width: 100%;
  }
  @media (width <= 896px) {
    gap: 16px;
  }
}
.top-ride-card__catch {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-weight: 900;
  font-size: clamp(1.8rem, 0.8118rem + 1.1029vw, 2.4rem); /* 24~18(1440~896) */
  line-height: 1.8;
  color: var(--font_c, #0c1627);
}
.top-ride-card__desc {
  font-size: clamp(1.4rem, 0.7411rem + 0.7353vw, 1.8rem); /* 18~14(1440~896) */
  line-height: 2;
  color: var(--font_c, #0c1627);
}
.top-ride-card__soon {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  padding: 36px 24px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 1.0824rem + 1.4706vw, 3.2rem); /* 32~24(1440~896) */
  color: #2b3f8f;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  @media (width <= 896px) {
    padding: 24px 16px;
  }
}
.top-ride-meter {
  img {
    width: 100%;
    max-width: none;
  }
}
.top-ride-open {
  width: calc((1128 / 1720) * 100%);
  max-width: 752px;
  margin-inline: auto;
  @media (width <= 896px) {
    width: 100%;
    max-width: 280px;
    filter: drop-shadow(6px 6px 15px rgba(3, 8, 76, 0.15));
  }
  img {
    width: 100%;
    max-width: none;
  }
}
.top-ride-card__specs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.top-ride-card__spec {
  display: inline-flex;
  align-items: center;
  gap: 2px 4px;
  padding: 10px 24px;
  border-radius: 9999px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(217, 219, 249, 0.7) 100%);
  box-shadow: 6px 6px 15px 0px rgba(3, 8, 76, 0.15);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6;
  color: #2b3f8f;
  &::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  > dt {
    flex-shrink: 0;
  }
  > dt::after {
    content: " :";
  }
  @media (width <= 480px) {
    flex-wrap: wrap;
    > dd {
      width: 100%;
    }
  }
}
.top-ride-card__spec--music::before {
  background-image: url("../images/icon_music.svg");
}
.top-ride-card__spec--heart::before {
  background-image: url("../images/icon_heart.svg");
}

/* ride details */
.top-ride-card__details {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  padding: 36px calc((40 / 1440) * 100cqw) 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--font_c, #0c1627);
  @media (width <= 896px) {
    padding: 24px 32px 32px;
    gap: 8px;
  }
}
.top-ride-card__detail {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  border-bottom: 1px solid rgba(43, 63, 143, 0.2);
  padding-bottom: 12px;
  @media (width <= 896px) {
    flex-direction: column;
    gap: 4px;
  }
}
.top-ride-card__detail > dt {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: 92px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
  @media (width <= 896px) {
    width: auto;
  }
  &::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}
.top-ride-card__detail--price > dt::before {
  background-image: url("../images/icon_price.svg");
}
.top-ride-card__detail--time > dt::before {
  background-image: url("../images/icon_time.svg");
}
.top-ride-card__detail--people > dt::before {
  background-image: url("../images/icon_people.svg");
}
.top-ride-card__detail--limit > dt::before {
  background-image: url("../images/icon_limit.svg");
}
.top-ride-card__detail > dd {
  flex: 1;
  min-width: 0;
}
.top-ride-card__detail__txt {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
}
.top-ride-card__detail__note {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 2;
}


/* top-app */
/* ============================================ */
.top-app {
  padding: 120px 0 72px;
  position: relative;
  @media (width <= 896px) {
    padding: 48px 0 64px;
  }
}
.top-app__bg {
  mix-blend-mode: screen;
  position: absolute;
  img {
    width: 100%;
    max-width: none;
  }
  &.--left {
    width: min(758px, calc((758 / 1920) * 100vw));
    top: min(-568px, calc((-568 / 1920) * 100vw));
    left: 0;
    @media (width <= 480px) {
      width: calc((240 / 375) * 100vw);
      top: auto;
      bottom: calc((390 / 375) * 100vw)
    }
  }
  &.--right {
    width: min(725px, calc((725 / 1920) * 100vw));
    top: min(-520px, calc((-520 / 1920) * 100vw));
    right: 0;
    @media (width <= 480px) {
      width: calc((204 / 375) * 100vw);
      top: calc((220 / 375) * 100vw)
    }
  }
}
.top-app__wrap {
  position: relative;
  z-index: 10;
}
.top-app__container {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-top: 40px;
  @media (width <= 896px) {
    flex-direction: column;
    gap: 32px;
    margin-top: 24px;
  }
}
.top-app__inner {
  flex: 1;
}
.top-app__img {
  flex: 0 0 auto;
  width: calc((450 / 1440) * 100%);
  img {
    width: 100%;
    max-width: none;
  }
  @media (width <= 896px) {
    width: 100%;
    max-width: 330px;
  }
}

/* top-app-list */
.top-app-list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.top-app-list__item {
  position: relative;
  display: flex;
  align-items: stretch;
  border-radius: 16px;
  box-shadow: 10px 10px 15px rgba(12, 22, 39, 0.1);
  @media (width <= 896px) {
    flex-direction: column;
  }
}
.top-app-list__item:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -38px;
  left: 50%;
  translate: -50% 0;
  width: 38px;
  height: 28px;
  background: url("../images/app_arrow.svg") center / contain no-repeat;
}
.top-app-list__item > dt {
  flex-shrink: 0;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 16px 0 0 16px;
  background: linear-gradient(130deg, rgb(217, 162, 255) 44%, rgb(57, 218, 251) 95%);
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: clamp(2.8rem, 0.8235rem + 2.2059vw, 4rem); /* 40~28(1440~896) */
  color: #fff;
  text-align: center;
  letter-spacing: 2px;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../images/app_wave.png") center / auto 102px no-repeat;
    pointer-events: none;
    @media (width <= 896px) {
      background: url("../images/app_wave_sp.png") center / 265px auto no-repeat;
    }
  }
  @media (width <= 896px) {
    width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 10px 0;
    letter-spacing: 1.4px;
    line-height: 1;
  }
}
.top-app-list__item > dd {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 16px 24px;
  border-radius: 0 16px 16px 0;
  background: #fff;
  @media (width <= 896px) {
    flex-direction: column;
    gap: 8px;
    padding: 24px 32px;
    border-radius: 0 0 16px 16px;
    align-items: center;
    text-align: center;
  }
}
.top-app-list__icon {
  flex-shrink: 0;
  > img {
    display: block;
  }
}
.top-app-list__contents {
  flex: 1;
  min-width: 0;
}
.top-app-list__catch {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-weight: 700;
  font-size: clamp(2rem, 0.6824rem + 1.4706vw, 2.8rem); /* 28~20(1440~896) */
  line-height: 2;
  color: var(--font_c, #0c1627);
}
.top-app-list__txt {
  font-size: clamp(1.4rem, 1.0706rem + 0.3676vw, 1.6rem); /* 16~14(1440~896) */
  line-height: 2;
  color: var(--font_c, #0c1627);
}

/* top-summer */
/* ============================================ */
.top-summer {
  filter: drop-shadow(0 -10px 40px color-mix(in srgb, #000 20%, transparent));
  position: relative;
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: calc((400 / 1920) * 100vw);
    background: linear-gradient(30deg, var(--point_c) 0%, var(--main_c) 100%);
    mask-image: url("../images/bg_02.svg");
    mask-size: 100% auto;
    mask-repeat: no-repeat;
    mask-position: top center;
    position: absolute;
    top: calc((-10 / 1920) * 100vw);
    left: 0;
    @media (width <= 480px) {
      mask-image: url("../images/bg_02_sp.svg");
      top: calc((-20 / 1920) * 100vw);
    }
  }
}
.top-summer__line {
  width: 100%;
  position: absolute;
  top: calc((-72 / 1920) * 100vw);
  left: 0;
  z-index: 15;
  @media (width <= 480px) {
    top: calc((-18 / 375) * 100vw);
  }
  img {
    width: 100%;
    max-width: none;
  }
}
.top-summer__wrap {
  padding-top: calc((208 / 1920) * 100vw);
  margin-top: calc((-208 / 1920) * 100vw);
  padding-bottom: 120px;
  background: #F8FBFF;
  position: relative;
  z-index: 10;
  mask-image: url("../images/bg_02.svg");
  mask-size: 100% auto;
  mask-repeat: no-repeat;
  mask-position: top center;
  @media (width <= 896px) {
    padding-bottom: 64px;
  }
  @media (width <= 480px) {
    padding-top: calc((56 / 375) * 100vw);
    margin-top: calc((-56 / 375) * 100vw);
    mask-image: url("../images/bg_02_sp.svg");
  }
}
.top-summer__bg {
  position: absolute;
  img {
    width: 100%;
    max-width: none;
  }
  &.--left {
    width: min(469px, calc((469 / 1920) * 100vw));
    top: min(120px, calc((120 / 1920) * 100vw));
    left: 0;
    @media (width <= 480px) {
      width: calc((177 / 375) * 100vw);
      top: calc((56 / 375) * 100vw);
    }
  }
  &.--right {
    width: min(478px, calc((478 / 1920) * 100vw));
    top: min(140px, calc((140 / 1920) * 100vw));
    right: 0;
    @media (width <= 480px) {
      width: calc((95 / 375) * 100vw);
      top: calc((56 / 375) * 100vw);
    }
  }
}
.top-summer__container {
  padding-top: 100px;
  position: relative;
  z-index: 20;
  @media (width <= 896px) {
    padding-top: 40px;
  }
}
.top-summer__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 50px;
  @media (width <= 896px) {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 8px;
    row-gap: 48px;
    padding-top: 30px;
  }
}
.top-summer-card {
  position: relative;
  background: #fff;
  box-shadow: 6px 6px 10px rgba(12, 22, 39, 0.15);
  --number-color: #D9A2FF;
  &:nth-child(2) { --number-color: #39DAFB; }
  &:nth-child(3) { --number-color: #FF4FBF; }
  &:nth-child(4) { --number-color: #2F80FF; }
  &:nth-child(odd) { transform: rotate(-2deg); }
  &:nth-child(even) { transform: rotate(2deg); }
  @media (width <= 896px) {
    box-shadow: 4px 4px 5px rgba(12, 22, 39, 0.15);
    &:nth-child(odd) { transform: rotate(0); }
    &:nth-child(even) { transform: rotate(0); }
  }
}
.top-summer-card__link {
  display: flex;
  flex-direction: column;
  padding: 24px;
  height: 100%;
  text-decoration: none;
  color: inherit;
  @media (width <= 896px) {
    padding: 18px;
  }
  @media (hover: hover) {
    &:hover {
      opacity: 1;
    }
    &:hover .top-summer-card__img > img {
      transform: scale(1.05);
    }
    &:hover .top-summer-card__btn {
      opacity: 0.8;
    }
  }
}
.top-summer-card__pin {
  position: absolute;
  top: -32px;
  left: 50%;
  translate: -50% 0;
  width: 50px;
  height: 50px;
  pointer-events: none;
  z-index: 1;
  > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  @media (width <= 896px) {
    top: -28px;
    width: 40px;
    height: 40px;
  }
}
.top-summer-card__number {
  position: absolute;
  top: 0;
  left: 20px;
  z-index: 1;
  pointer-events: none;
  > img {
    display: block;
    width: 64px;
    height: auto;
  }
  @media (width <= 896px) {
    left: 0;
    > img { width: 40px; }
  }
}
.top-summer-card__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease-out;
  }
}
.top-summer-card__ttl {
  margin-top: 16px;
  margin-bottom: 16px;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-weight: 700;
  font-size: clamp(1.4rem, -0.247rem + 1.8382vw, 2.4rem); /* 24~14(1440~896) */
  line-height: 1.6;
  text-align: center;
  color: var(--font_c, #0c1627);
  @media (width <= 896px) {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  > span {
    display: inline-block;
    &::after {
      content: "";
      display: block;
      height: 1px;
      margin-top: 4px;
      background: repeating-linear-gradient(
        to right,
        var(--number-color) 0px,
        var(--number-color) 2px,
        transparent 2px,
        transparent 6px
      );
    }
  }
}
.top-summer-card__btn {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-radius: 100px;
  background: linear-gradient(to bottom, #7cefc7, #4fd8f3);
  box-shadow: 6px 6px 7.5px rgba(3, 8, 76, 0.15);
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-weight: 700;
  font-size: clamp(1.2rem, 0.2118rem + 1.1029vw, 1.8rem); /* 18~12(1440~896) */
  color: #fff;
  transition: opacity 0.3s ease-out;
  &::before {
    content: "";
    display: block;
    width: 32px;
    flex-shrink: 0;
  }
  &::after {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: url("../images/circle_arrow_white.svg") center / contain no-repeat;
  }
  @media (width <= 896px) {
    padding: 0 8px;
    height: 32px;
    &::before { width: 18px; }
    &::after { width: 18px; height: 18px; }
  }
}