@charset "utf-8";

/* ↓↓↓ fv ↓↓↓ */
.fv {
  width: 100%;
  height: min(720px, 56.25vw);
  min-height: 640px;
  padding: min(32px, 2.5vw);
  @media (max-width: 768px) {
    padding: 20px 16px;
    min-height: 620px;
  }
}
.fv .content {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 127, 11, 0.12);
  border-radius: 32px;
  @media (max-width: 768px) {
    border-radius: 20px;
    display: flex;
    align-items: center;
  }
  &::before, &::after {
    content: '';
    position: absolute;
    top: 0;
    left: min(128px, 10vw);
    width: min(33px, 2.578125vw);
    height: min(33px, 2.578125vw);
    background: url(../img/common/corner-deco.png) no-repeat;
    background-size: cover;
    @media (max-width: 768px) {
      width: 20px;
      height: 20px;
      left: 76px;
    }
  }
  &::after {
    top: min(136px, 10.625vw);
    left: 0;
    @media (max-width: 768px) {
      top: 81px;
      left: 0;
    }
  }
}
.fv .content .object-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1135px, 88.671875vw);
  height: 100%;
  margin: 0 auto;
  @media (max-width: 768px) {
    flex-direction: column;
    gap: 20px;
    width: 100%;
    height: fit-content;
    padding-top: 74px;
  }
}
.fv .content .object-wrap .object {
  position: relative;
  scale: 0;
}
.fv .content .object-wrap .img {
  display: block;
  width: min(321px, 25.078125vw);
  @media (max-width: 768px) {
    width: min(max(130px, 34.66666666666667vw), max(130px, 19.490254872563717vh));
    max-width: 190px;
  }
}
.fv .content .object-wrap .deco {
  position: absolute;
  width: min(121px, 9.453125vw);
  right: max(-10px, -0.78125vw);
  bottom: max(-10px, -0.78125vw);
  @media (max-width: 768px) {
    width: 49px;
    right: -20px;
    bottom: 25px;
  }
}
.fv .content .object-wrap .object:nth-of-type(1) .deco {
  @media (max-width: 768px) {
    width: 49px;
    right: unset;
    left: -35px;
    bottom: 5px;
  }
}
.fv .content .list {
  position: absolute;
  translate: max(-550px, -42.96875vw) 0;
  left: 50%;
  bottom: min(50px, 3.90625vw);
  display: flex;
  gap: min(7px, 0.546875vw);
  opacity: 0;
  @media (max-width: 768px) {
    translate: 0 0;
    top: 124px;
    left: 16px;
    bottom: unset;
    flex-direction: column;
    gap: 6px;
  }
}
.fv .content .list .item {
  display: flex;
  gap: min(7px, 0.546875vw);
  align-items: flex-end;
  padding: min(10px, 0.78125vw) min(16px, 1.25vw) min(16px, 1.25vw);
  background-color: var(--color-orange);
  border-radius: 9999px;
  @media (max-width: 768px) {
    flex-direction: column;
    gap: 7px;
    align-items: center;
    padding: 6px 8px 18px 5px;
    &:nth-of-type(1) {
      height: 135px;
    }
  }
}
.fv .content .list .item .icon {
  display: block;
  width: min(30px, 2.34375vw);
  height: fit-content;
  @media (max-width: 768px) {
    width: 25px;
    margin-left: 3px;
  }
}
.fv .content .list .item .icon.-pb2 {
  padding-bottom: min(2px, 0.15625vw);
  @media (max-width: 768px) {
    padding-bottom: 0;
  }
}
.fv .content .list .item .txt {
  font-size: min(1.4rem, 1.09375vw);
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
  @media (max-width: 768px) {
    font-size: 1.1rem;
    writing-mode: vertical-lr;
    white-space: nowrap;
  }
}
.fv .content .deco-img {
  position: absolute;
  bottom: max(-120px, -9.375vw);
  right: min(162px, 12.65625vw);
  width: min(347px, 27.109375vw);
  scale: 0;
  @media (max-width: 768px) {
    bottom: -48px;
    right: 20px;
    width: 125px;
  }
}
/* ↑↑↑ fv ↑↑↑ */
/* ↓↓↓ blog ↓↓↓ */
.blog {
  margin-top: min(20px, 1.5625cqw);
  @media (max-width: 768px) {
    margin-top: 35px;
    padding-inline: 27px;
  }
}
.blog .inner {
  max-width: 1280px;
  margin: 0 auto;
  container-type: inline-size;
  @media (max-width: 768px) {
    width: 100%;
    max-width: 460px;
  }
}
.blog .inner .block {
  width: 25cqw;
  margin-left: 7.03125cqw;
  @media (max-width: 768px) {
    width: 100%;
    margin-left: 0;
  }
}
.blog .inner .block .head {
  width: fit-content;
  font-size: 1.25cqw;
  font-weight: 600;
  color: var(--color-orange);
  padding: 0.9375cqw 1.40625cqw 1.09375cqw;
  border: 1px solid var(--color-orange);
  border-bottom: unset;
  background-color: #fff;
  border-radius: 16px 16px 0 0;
  line-height: 1;
  @media (max-width: 768px) {
    font-size: 1.6rem;
    padding: 12px 18px 14px;
  }
}
.blog .inner .block .list {
  width: 100%;
}
.blog .inner .block .list .item {
  display: flex;
  padding-block: 0.9375cqw;
  border-bottom: 1px solid var(--color-orange);
  gap: 0.546875cqw;
  @media (max-width: 768px) {
    gap: 7px;
    padding-block: 15px;
  }
}
.blog .inner .block .list .item:nth-of-type(1) {
  border-top: 1px solid var(--color-orange);
}
.blog .inner .block .list .item .day {
  font-size: 1.09375cqw;
  font-weight: 600;
  color: #606060;
  padding-left: 0.9375cqw;
  letter-spacing: 0;
  @media (max-width: 768px) {
    font-size: 1.2rem;
    padding-left: 10px;
  }
}
.blog .inner .block .list .item .ttl {
  font-size: 1.09375cqw;
  font-weight: 600;
  color: #601986;
  border-bottom: 1px solid currentColor;
  letter-spacing: 0;
  @media (max-width: 768px) {
    font-size: 1.2rem;
  }
}
/* ↑↑↑ blog ↑↑↑ */
/* ↓↓↓ intro ↓↓↓ */
.intro {
  margin-top: min(140px, 10.9375cqw);
  @media (max-width: 768px) {
    margin-top: 45px;
  }
}
.intro .inner {
  max-width: 1280px;
  margin: 0 auto;
  container-type: inline-size;
  @media (max-width: 768px) {
    width: 100%;
    max-width: 460px;
  }
}
.intro .inner .content {
  position: relative;
  display: flex;
  gap: 7.03125cqw;
  margin-left: 5.078125cqw;
  align-items: center;
  @media (max-width: 768px) {
    flex-direction: column;
    align-items: unset;
    gap: 32px;
    margin-left: 0;
  }
}
.intro .inner .content .copy {
  font-size: min(48px, 3.75cqw);
  font-family: var(--text-zen);
  letter-spacing: 0.08em;
  line-height: 1.4375;
  font-weight: 900;
  @media (max-width: 768px) {
    font-size: 2.8rem;
    padding-left: 38px;
  }
}
.intro .inner .content .copy .-orange {
  display: inline-block;
  translate: -0.5em 0; 
}
.intro .inner .content .-orange {
  color: var(--color-orange);
}
.intro .inner .content .lead {
  font-size: 1.25cqw;
  font-family: var(--text-zen);
  font-weight: 700;
  line-height: 2.5;
  letter-spacing: 0;
  @media (max-width: 768px) {
    font-size: 1.2rem;
    line-height: 2;
    padding-inline: 38px;
  }
}
.intro .inner .content .lead .-fs32 {
  font-size: 2.5cqw;
  line-height: 2;
  @media (max-width: 768px) {
    font-size: 2.4rem;
  }
}
.intro .inner .content .deco {
  position: absolute;
  top: -5.078125cqw;
  right: 6.875cqw;
  width: 9.453125cqw;
  @media (max-width: 768px) {
    width: 73px;
    top: 30px;
    right: 20px;
  }
}
/* ↑↑↑ intro ↑↑↑ */
/* ↓↓↓ info ↓↓↓ */
.info {
  margin-top: min(270px, 21.09375cqw);
  overflow-x: clip;
  @media (max-width: 768px) {
    margin-top: 0;
    padding-top: 456px;
  }
}
.info .inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  container-type: inline-size;
  @media (max-width: 768px) {
    width:100%;
    max-width: 460px;
  }
}
.info .inner .content {
  position: relative;
  width: 100%;
  padding-left: 7.8125cqw;
  @media (max-width: 768px) {
    width: fit-content;
    padding-left: 35px;
  }
}
.info .inner .content .txt-wrap {
  width: 28.125cqw;
  @media (max-width: 768px) {
    width: 100%;
  }
}
.info .inner .content .txt-wrap .sub-ttl {
  display: flex;
  gap: 1.40625cqw;
  align-items: flex-end;
  @media (max-width: 768px) {
    gap: 12px;
  }
}
.info .inner .content .txt-wrap .sub-ttl .icon {
  width: 3.28125cqw;
  @media (max-width: 768px) {
    width: 27px;
  }
}
.info .inner .content .txt-wrap .sub-ttl p {
  font-family: var(--text-dongle);
  font-size: 2.5cqw;
  font-weight: 700;
  color: var(--color-orange);
  letter-spacing: 0;
  line-height: 0.8;
  @media (max-width: 768px) {
    font-size: 2.1rem;
  }
}
.info .inner .content .txt-wrap .ttl {
  font-size: 3.125cqw;
  font-family: var(--text-zen);
  font-weight: 900;
  letter-spacing: 0;
  margin-top: 2.03125cqw;
  @media (max-width: 768px) {
    font-size: 2.6rem;
    margin-top: 20px;
    line-height: 1;
  }
}
.info .inner .content .txt-wrap .txt {
  font-size: 1.25cqw;
  font-family: var(--text-zen);
  font-weight: 500;
  margin-top: 0.9375cqw;
  @media (max-width: 768px) {
    font-size: 1.0rem;
    margin-top: 10px;
  }
}
.info .inner .content .img {
  position: absolute;
  top: -8.28125cqw;
  right: -25cqw;
  width: 84.765625cqw;
  @media (max-width: 768px) {
    top: -240px;
    right: -300px;
    width: 543px;
  }
}
.info .inner .content .btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 20cqw;
  aspect-ratio: 256/64;
  font-family: var(--text-zen);
  font-size: 1.25cqw;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  border: 3px solid var(--color-orange);
  background-color: var(--color-orange);
  border-radius: 9999px;
  padding-inline: 2.734375cqw 1.25cqw;
  margin-top: 1.5625cqw;
  transition: background-color 300ms ease, color 300ms ease;
  @media (max-width: 768px) {
    width: 165px;
    aspect-ratio: 165/41;
    font-size: 10px;
    padding-inline: 23px 10px;
    margin-top: 20px;
  }
}
@media (min-width: 769px) {
  .info .inner .content .btn:hover {
    background-color: #fff;
    color: var(--color-orange);
  }
}
.info .inner .content .btn .arrow {
  position: relative;
  width: 2.5cqw;
  height: 2.5cqw;
  background-color: #fff;
  border-radius: 50%;
  transition: background-color 300ms ease;
  @media (max-width: 768px) {
    width: 21px;
    height: 21px;
  }
}
@media (min-width: 769px) {
  .info .inner .content .btn:hover .arrow {
    background-color: var(--color-orange);
  }
}
.info .inner .content .btn .arrow::after {
  content: '';
  position: absolute;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  width: 0.546875cqw;
  height: 0.859375cqw;
  mask-image: url(../img/common/arrow.svg);
  mask-repeat: no-repeat;
  mask-size: cover;
  background-color: var(--color-orange);
  transition: background-color 300ms ease;
  @media (max-width: 768px) {
    width: 4px;
    height: 7px;
  }
}
@media (min-width: 769px) {
  .info .inner .content .btn:hover .arrow::after {
    background-color: #fff;
  }
}
.info .inner .deco {
  position: absolute;
  top: -10.9375cqw;
  left: 23.4375cqw;
  width: 13.203124999999998cqw;
  @media (max-width: 768px) {
    left: unset;
    top: -450px;
    right: 20px;
    width: 168px;
  }
}
/* ↑↑↑ info ↑↑↑ */
/* ↓↓↓ clinic ↓↓↓ */
.clinic {
  width: 100%;
  margin-top: min(160px, 12.5cqw);
  @media (max-width: 768px) {
    margin-top: 30px;
    padding-inline: 15px;
  }
}
.clinic .inner {
  max-width: 1280px;
  margin: 0 auto;
  container-type: inline-size;
  @media (max-width: 768px) {
    width: 100%;
    max-width: 460px;
  }
}
.clinic .inner .content {
  width: 87.5cqw;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  @media (max-width: 768px) {
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }
}
.clinic .inner .content .block {
  position: relative;
  width: 41.875cqw;
  padding: 3.90625cqw 3.5937499999999996cqw;
  background-color: rgba(228, 231, 232, 0.7);
  border-radius: 64px;
  @media (max-width: 768px) {
    width: 100%;
    padding: 38px 32px;
  }
}

.clinic .inner .content .block:last-of-type {
  background-color: #ffcc9d;
}

.clinic .inner .content .block .txt-wrap .sub-ttl {
  display: flex;
  gap: 1.40625cqw;
  align-items: flex-end;
  @media (max-width: 768px) {
    gap: 12px;
  }
}
.clinic .inner .content .block .txt-wrap .sub-ttl .icon {
  display: block;
  width: 3.28125cqw;
  @media (max-width: 768px) {
    width: 27px;
  }
}
.clinic .inner .content .block .txt-wrap .sub-ttl p {
  font-family: var(--text-dongle);
  font-size: 2.5cqw;
  font-weight: 700;
  color: var(--color-orange);
  letter-spacing: 0;
  line-height: 0.8;
  @media (max-width: 768px) {
    font-size: 2.1rem;
  }
}
.clinic .inner .content .block .txt-wrap .ttl {
  font-size: 3.125cqw;
  font-family: var(--text-zen);
  font-weight: 900;
  letter-spacing: 0;
  margin-top: 1.71875cqw;
  @media (max-width: 768px) {
    font-size: 2.6rem;
    margin-top: 20px;
    line-height: 1;
  }
}
.clinic .inner .content .block .txt-wrap .txt {
  font-size: 1.25cqw;
  font-family: var(--text-zen);
  font-weight: 500;
  margin-top: 0.9375cqw;
  height: 5.9375cqw;
  @media (max-width: 768px) {
    font-size: 1.0rem;
    margin-top: 10px;
    height: 42px;
  }
}
.clinic .inner .content .block .btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 20cqw;
  aspect-ratio: 256/64;
  font-family: var(--text-zen);
  font-size: 1.25cqw;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  border: 3px solid var(--color-orange);
  background-color: var(--color-orange);
  border-radius: 9999px;
  padding-inline: 2.734375cqw 1.25cqw;
  margin-top: 1.328125cqw;
  transition: background-color 300ms ease, color 300ms ease;
  @media (max-width: 768px) {
    width: 165px;
    aspect-ratio: 165/41;
    font-size: 10px;
    padding-inline: 23px 10px;
    margin-top: 20px;
  }
}
@media (min-width: 769px) {
  .clinic .inner .content .block .btn:hover {
    background-color: #fff;
    color: var(--color-orange);
  }
}
.clinic .inner .content .block .btn .arrow {
  position: relative;
  width: 2.5cqw;
  height: 2.5cqw;
  background-color: #fff;
  border-radius: 50%;
  transition: background-color 300ms ease;
  @media (max-width: 768px) {
    width: 21px;
    height: 21px;
  }
}
@media (min-width: 769px) {
  .clinic .inner .content .block .btn:hover .arrow {
    background-color: var(--color-orange);
  }
}
.clinic .inner .content .block .btn .arrow::after {
  content: '';
  position: absolute;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  width: 0.546875cqw;
  height: 0.859375cqw;
  mask-image: url(../img/common/arrow.svg);
  mask-repeat: no-repeat;
  mask-size: cover;
  background-color: var(--color-orange);
  transition: background-color 300ms ease;
  @media (max-width: 768px) {
    width: 4px;
    height: 7px;
  }
}
@media (min-width: 769px) {
  .clinic .inner .content .block .btn:hover .arrow::after {
    background-color: #fff;
  }
}
.clinic .inner .content .block .img {
  position: absolute;
  top: 3.515625cqw;
  right: 3.515625cqw;
  width: 16.015625cqw;
  border-radius: 20px;
  overflow: hidden;
  @media (max-width: 768px) {
    top: 30px;
    right: 30px;
    width: 131px;
  }
}
/* ↑↑↑ clinic ↑↑↑ */
/* ↓↓↓ implant ↓↓↓ */
.implant {
  margin-top: min(80px, 6.25cqw);
  overflow-x: clip;
  @media (max-width: 768px) {
    margin-top: 21px;
    padding-inline: 15px;
  }
}
.implant .inner {
  max-width: 1280px;
  margin: 0 auto;
  container-type: inline-size;
  @media (max-width: 768px) {
    width: 100%;
    max-width: 460px;
  }
}
.implant .inner .content {
  position: relative;
  width: 87.5cqw;
  padding: 6.25cqw 5.3125cqw;
  margin: 0 auto;
  @media (max-width: 768px) {
    width: 100%;
    padding: 38px 32px;
  }
}
.implant .inner .content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 102.49999999999999cqw;
  height: 100%;
  background-color: rgba(255, 127, 11, 0.12);
  border-radius: 64px;
  z-index: -1;
  @media (max-width: 768px) {
    width: 460px;
    border-radius: 42px;
  }
}
.implant .inner .content .txt-wrap .sub-ttl {
  display: flex;
  gap: 1.40625cqw;
  align-items: flex-end;
  @media (max-width: 768px) {
    gap: 12px;
  }
}
.implant .inner .content .txt-wrap .sub-ttl .icon {
  display: block;
  width: 4.6875cqw;
  @media (max-width: 768px) {
    width: 27px;
  }
}
.implant .inner .content .txt-wrap .sub-ttl p {
  font-family: var(--text-dongle);
  font-size: 8.125cqw;
  font-weight: 700;
  color: var(--color-orange);
  letter-spacing: 0;
  line-height: 0.4;
  @media (max-width: 768px) {
    font-size: 2.1rem;
  }
}
.implant .inner .content .txt-wrap .ttl {
  width: fit-content;
  font-size: 4.375cqw;
  font-family: var(--text-zen);
  font-weight: 900;
  letter-spacing: -0.05em;
  margin-top: 3.125cqw;
  @media (max-width: 768px) {
    font-size: 2.6rem;
    margin-top: 20px;
    line-height: 1;
  }
}
.implant .inner .content .txt-wrap .txt {
  font-size: 1.25cqw;
  font-family: var(--text-zen);
  font-weight: 500;
  margin-top: 0.9375cqw;
  letter-spacing: 0;
  height: 5.9375cqw;
  @media (max-width: 768px) {
    font-size: 1.0rem;
    margin-top: 10px;
    height: fit-content;
  }
}
.implant .inner .content .btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 20cqw;
  aspect-ratio: 256/64;
  font-family: var(--text-zen);
  font-size: 1.25cqw;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  border: 3px solid var(--color-orange);
  background-color: var(--color-orange);
  border-radius: 9999px;
  padding-inline: 2.734375cqw 1.25cqw;
  margin-top: 6.25cqw;
  transition: background-color 300ms ease, color 300ms ease;
  @media (max-width: 768px) {
    width: 165px;
    aspect-ratio: 165/41;
    font-size: 10px;
    padding-inline: 23px 10px;
    margin-top: 267px;
  }
}
@media (min-width: 769px) {
  .implant .inner .content .btn:hover {
    background-color: #fff;
    color: var(--color-orange);
  }
}
.implant .inner .content .btn .arrow {
  position: relative;
  width: 2.5cqw;
  height: 2.5cqw;
  background-color: #fff;
  border-radius: 50%;
  transition: background-color 300ms ease;
  @media (max-width: 768px) {
    width: 21px;
    height: 21px;
  }
}
@media (min-width: 769px) {
  .implant .inner .content .btn:hover .arrow {
    background-color: var(--color-orange);
  }
}
.implant .inner .content .btn .arrow::after {
  content: '';
  position: absolute;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  width: 0.546875cqw;
  height: 0.859375cqw;
  mask-image: url(../img/common/arrow.svg);
  mask-repeat: no-repeat;
  mask-size: cover;
  background-color: var(--color-orange);
  transition: background-color 300ms ease;
  @media (max-width: 768px) {
    width: 4px;
    height: 7px;
  }
}
@media (min-width: 769px) {
  .implant .inner .content .btn:hover .arrow::after {
    background-color: #fff;
  }
}
.implant .inner .content .img {
  position: absolute;
  translate: 0 -50%;
  top: 50%;
  right: -25.390625cqw;
  width: 70.625cqw;
  @media (max-width: 768px) {
    translate: 0;
    top: 168px;
    left: 20px;
    width: 476px;
  }
} 
/* ↑↑↑ implant ↑↑↑ */
/* ↓↓↓ staff ↓↓↓ */
.staff {
  margin-top: min(110px, 8.59375cqw);
  @media (max-width: 768px) {
    margin-top: 30px;
    padding-inline: 15px;
  }
}
.staff .inner {
  max-width: 1280px;
  margin: 0 auto;
  container-type: inline-size;
  @media (max-width: 768px) {
    width: 100%;
    max-width: 460px;
  }
}
.staff .inner .content {
  display: flex;
  justify-content: center;
  gap: 3.28125cqw;
  width: 87.5cqw;
  margin: 0 auto;
  @media (max-width: 768px) {
    flex-direction: column;
    width: 100%;
    gap: 20px;
  }
}
.staff .inner .content .block {
  position: relative;
  width: 26.953125cqw;
  aspect-ratio: 345/453;
  padding: 4.375cqw 3.4375cqw 4.84375cqw;
  background-color: #ffcc9d;
  border-radius: 64px;
  @media (max-width: 768px) {
    width: 100%;
    aspect-ratio: unset;
    height: 256px;
    padding: 38px 32px;
    border-radius: 42px;
  }
}
.staff .inner .content .block:nth-of-type(2) {
  background-color: rgba(228, 231, 232, 0.7);
}
.staff .inner .content .block .txt-wrap .sub-ttl {
  display: flex;
  gap: 1.40625cqw;
  align-items: flex-end;
  @media (max-width: 768px) {
    gap: 12px;
  }
}
.staff .inner .content .block .txt-wrap .sub-ttl .icon {
  display: block;
  width: 3.28125cqw;
  @media (max-width: 768px) {
    width: 27px;
  } 
}
.staff .inner .content .block .txt-wrap .sub-ttl p {
  font-family: var(--text-dongle);
  font-size: 2.5cqw;
  font-weight: 700;
  color: var(--color-orange);
  letter-spacing: 0;
  line-height: 0.8;
  @media (max-width: 768px) {
    font-size: 2.1rem;
  }
}
.staff .inner .content .block .txt-wrap .ttl {
  font-size: 3.125cqw;
  font-family: var(--text-zen);
  font-weight: 900;
  letter-spacing: 0;
  margin-top: 2.03125cqw;
  line-height: 1.2;
  @media (max-width: 768px) {
    font-size: 2.6rem;
    margin-top: 20px;
    line-height: 1;
  }
}
.staff .inner .content .block .txt-wrap .txt {
  font-size: 1.25cqw;
  font-family: var(--text-zen);
  font-weight: 500;
  margin-top: 1.953125cqw;
  height: 4.84375cqw;
  letter-spacing: 0;
  @media (max-width: 768px) {
    font-size: 1.0rem;
    margin-top: 10px;
  }
}
.staff .inner .content .block .btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 20cqw;
  aspect-ratio: 256/64;
  font-family: var(--text-zen);
  font-size: 1.25cqw;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  border: 3px solid var(--color-orange);
  background-color: var(--color-orange);
  border-radius: 9999px;
  padding-inline: 2.734375cqw 1.25cqw;
  margin-top: 1.328125cqw;
  transition: background-color 300ms ease, color 300ms ease;
  @media (max-width: 768px) {
    width: 165px;
    aspect-ratio: 165/41;
    font-size: 10px;
    padding-inline: 23px 10px;
    margin-top: 35px;
  }
}
.staff .inner .content .block:nth-of-type(2) .btn,
.staff .inner .content .block:nth-of-type(3) .btn {
  margin-top: 5cqw;
  @media (max-width: 768px) {
    margin-top: 35px;
  }
}
@media (min-width: 769px) {
  .staff .inner .content .block .btn:hover {
    background-color: #fff;
    color: var(--color-orange);
  }
}
.staff .inner .content .block .btn .arrow {
  position: relative;
  width: 2.5cqw;
  height: 2.5cqw;
  background-color: #fff;
  border-radius: 50%;
  transition: background-color 300ms ease;
  @media (max-width: 768px) {
    width: 21px;
    height: 21px;
  }
}
@media (min-width: 769px) {
  .staff .inner .content .block .btn:hover .arrow {
    background-color: var(--color-orange);
  }
}
.staff .inner .content .block .btn .arrow::after {
  content: '';
  position: absolute;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  width: 0.546875cqw;
  height: 0.859375cqw;
  mask-image: url(../img/common/arrow.svg);
  mask-repeat: no-repeat;
  mask-size: cover;
  background-color: var(--color-orange);
  transition: background-color 300ms ease;
  @media (max-width: 768px) {
    width: 4px;
    height: 7px;
  }
}
@media (min-width: 769px) {
  .staff .inner .content .block .btn:hover .arrow::after {
    background-color: #fff;
  }
}
.staff .inner .content .block:nth-of-type(1) .img {
  position: absolute;
  top: 9.375cqw;
  right: 1.5625cqw;
  width: 8.984375cqw;
  @media (max-width: 768px) {
    top: 22px;
    right: -8px;
    width: 128px;
  }
}
.staff .inner .content .block:nth-of-type(2) .img {
  position: absolute;
  top: -2.96875cqw;
  right: 1.40625cqw;
  width: 10.859375cqw;
  @media (max-width: 768px) {
    top: -7px;
    right: 38px;
    width: 129px;
  }
}
/* ↑↑↑ staff ↑↑↑ */
/* ↓↓↓ other ↓↓↓ */
.other {
  margin-block: min(110px, 8.59375vw);
  @media (max-width: 768px) {
    margin-block: 18px;
    padding-inline: 15px;
  }
}
.other .inner {
  max-width: 1280px;
  margin: 0 auto;
  container-type: inline-size;
  @media (max-width: 768px) {
    width: 100%;
    max-width: 460px;
  }
}
.other .inner .content {
  display: flex;
  justify-content: space-between;
  width: 87.5cqw;
  margin: 0 auto;
  @media (max-width: 768px) {
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }
}
.other .inner .content .card {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 41.875cqw;
  aspect-ratio: 536/240;
  background-color: rgba(255, 127, 11, 0.12);
  border-radius: 24px;
  transition: opacity 300ms ease;
  @media (max-width: 768px) {
    width: 100%;
    aspect-ratio: unset;
    height: 154px;
  }
}

@media (min-width: 769px) {
  .other .inner .content .card:hover {
    opacity: 0.5;
  } 
}

.other .inner .content .card::after {
  content: '';
  position: absolute;
  translate: 0 -50%;
  top: 50%;
  right: 1.953125cqw;
  width: 2.5cqw;
  height: 2.5cqw;
  background: url(../img/common/ex-link.png) no-repeat;
  background-size: cover;
  @media (max-width: 768px) {
    right: 16px;
    width: 21px;
    height: 21px;
  }
}
.other .inner .content .card:nth-of-type(2) {
  background-color: #fff;
  border: 1px solid #000;
}
.other .inner .content .card:nth-of-type(2)::before {
  content: '';
  position: absolute;
  translate: 0 -50%;
  top: 50%;
  left: 5.9375cqw;
  width: 3.671875cqw;
  height: 3.671875cqw;
  background: url(../img/common/instagram-logo.png) no-repeat;
  background-size: cover;
  @media (max-width: 768px) {
    left: 48px;
    width: 30px;
    height: 30px;
  }
}
.other .inner .content .card .txt01 {
  font-size: 2.5cqw;
  font-family: var(--text-zen);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0;
  @media (max-width: 768px) {
    font-size: 2.0rem;
  }
}
.other .inner .content .card .txt01 .-small {
  font-size: 1.640625cqw;
  @media (max-width: 768px) {
    font-size: 1.3rem;
  }
}
.other .inner .content .card .txt02 {
  font-size: 1.875cqw;
  font-family: var(--text-zen);
  font-weight: 700;
  text-align: center;
  margin-left: 3.90625cqw;
  @media (max-width: 768px) {
    font-size: 1.8rem;
    margin-left: 40px;
  }
}
/* ↑↑↑ other ↑↑↑ */
/* ↓↓↓ recruit ↓↓↓ */

/* ↑↑↑ recruit ↑↑↑ */
@media (min-width: 1281px) {}

@media (max-width: 1280px) {}

@media (max-width: 768px) {}

@media (max-width: 480px) {}

@media (max-width: 375px) {}