/* /cafe/_top.scss
-------------------------------------------------- */
/* setting/_extend.scss
-------------------------------------------------- */
/* setting/_keyframe.scss
-------------------------------------------------- */
@keyframes logo-slider {
  0% {
    transform: translate(-33.33333%);
  }
  100% {
    transform: translate(-66.66666%);
  }
}
@keyframes arrow {
  0% {
    transform: translate3d(0, 0, 0);
  }
  49% {
    transform: translate3d(100%, 0, 0);
  }
  50% {
    transform: translate3d(100%, 0, 0);
    visibility: hidden;
  }
  51% {
    transform: translate3d(-100%, 0, 0);
    visibility: hidden;
  }
  52% {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes shapeBg {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  25% {
    transform: translate(-50%, -50%) scale(0.95);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  75% {
    transform: translate(-50%, -50%) scale(0.95);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes scaleIn {
  0% {
    transform: scale(1.075);
  }
  to {
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.top-spot__btn, .top-how__btn, .top-about__btn, .top-journal__btn {
  position: relative;
  display: block;
  box-sizing: border-box;
  color: #fff;
  font-weight: 600;
  background-color: #022729;
}
.top-spot__btn span, .top-how__btn span, .top-about__btn span, .top-journal__btn span {
  display: block;
  text-align: center;
  border-right: 1px solid #809394;
}
.top-spot__btn i, .top-how__btn i, .top-about__btn i, .top-journal__btn i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}
.top-spot__btn i::after, .top-how__btn i::after, .top-about__btn i::after, .top-journal__btn i::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  mask: url(../img/common/arrow.svg) center center no-repeat;
  mask-size: contain;
  background-color: #fff;
}
@media screen and (min-width: 769px), print {
  .top-spot__btn, .top-how__btn, .top-about__btn, .top-journal__btn {
    padding: 1.1713030747vw 3.0014641288vw 1.1713030747vw 1.756954612vw;
    width: 22.6939970717vw;
    border-radius: 0.7320644217vw;
    border: 2px solid #022729;
    transition: background-color 0.2s linear, color 0.2s linear;
  }
  .top-spot__btn span, .top-how__btn span, .top-about__btn span, .top-journal__btn span {
    font-size: 0.878477306vw;
    line-height: 2.0833333333em;
    transition: border-right-color 0.2s linear;
  }
  .top-spot__btn:hover, .top-how__btn:hover, .top-about__btn:hover, .top-journal__btn:hover {
    background-color: #fff;
    color: #022729;
  }
  .top-spot__btn:hover span, .top-how__btn:hover span, .top-about__btn:hover span, .top-journal__btn:hover span {
    border-right-color: #022729;
  }
  .top-spot__btn:hover i::after, .top-how__btn:hover i::after, .top-about__btn:hover i::after, .top-journal__btn:hover i::after {
    animation: arrow 0.6s;
    background-color: #022729;
  }
  .top-spot__btn i, .top-how__btn i, .top-about__btn i, .top-journal__btn i {
    right: 1.2445095168vw;
    width: 0.7320644217vw;
    height: 0.6588579795vw;
  }
  .top-spot__btn i::after, .top-how__btn i::after, .top-about__btn i::after, .top-journal__btn i::after {
    transition: background-color 0.2s linear;
  }
}
@media screen and (max-width: 768px) {
  .top-spot__btn, .top-how__btn, .top-about__btn, .top-journal__btn {
    padding: 3.2vw 10.6666666667vw 3.2vw 6.4vw;
    width: 76vw;
    border-radius: 3.2vw;
  }
  .top-spot__btn span, .top-how__btn span, .top-about__btn span, .top-journal__btn span {
    font-size: 3.2vw;
    line-height: 2.0833333333em;
  }
  .top-spot__btn i, .top-how__btn i, .top-about__btn i, .top-journal__btn i {
    right: 4.5333333333vw;
    width: 2.6666666667vw;
    height: 2.4vw;
  }
}

/* /cafe/_top-fv.scss
-------------------------------------------------- */
.top-fv__wrap {
  position: relative;
}
.top-fv__logo img {
  width: 100%;
}
.top-fv__fig {
  position: relative;
  inset: 0;
  z-index: inherit;
  width: 100%;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
}
.top-fv__fig .swiper-wrapper {
  inline-size: 100%;
  block-size: 100%;
}
.swiper-creative .top-fv__slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}
.top-fv__item {
  display: block flow-root;
  inline-size: 100%;
  block-size: 100%;
}
.top-fv__img {
  width: 100%;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: clip-path 2s 0.2s cubic-bezier(0.87, 0, 0.13, 1);
}
.swiper-slide-next .top-fv__img, .swiper-slide-duplicate-next .top-fv__img {
  clip-path: inset(0 100% 0 0) !important;
}
.swiper-slide-active .top-fv__img {
  clip-path: inset(0 0 0 0) !important;
  animation: scaleIn 3.5s ease-in-out forwards !important;
}
.top-fv__btns {
  position: absolute;
  z-index: 1;
}
.top-fv__prev, .top-fv__next {
  position: absolute;
  top: 0;
  cursor: pointer;
  background-color: #022729;
  border: none;
  border-radius: 50%;
}
.top-fv__prev {
  transform: rotate(180deg);
}
.top-fv__next {
  right: 0;
}
.top-fv__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.top-fv__arrow::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: #fff;
  mask: url(../img/common/arrow.svg) center center no-repeat;
  mask-size: cover;
}
.top-fv__toggle {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 0;
}
.top-fv__toggle::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}
.top-fv__toggle span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.top-fv__toggle.paused span {
  background-color: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.top-fv__bnrs {
  position: fixed;
  z-index: 50;
  transition: opacity 0.2s linear;
}
.top-fv__bnrs.is-fadeout {
  opacity: 0;
  pointer-events: none;
}
.top-fv__bnr-link, .top-fv__bnr-img {
  display: block;
  width: 100%;
}
.top-fv__bnr-img {
  height: auto;
  transition: opacity 0.2s linear;
}
.top-fv__bnr-link {
  background: #fff;
  overflow: hidden;
}
@media (any-hover: hover) {
  .top-fv__bnr-link:hover .top-fv__bnr-img {
    opacity: 0.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .swiper-slide .top-fv__img {
    object-position: top center !important;
    transition: unset !important;
  }
  .swiper-slide-active .top-fv__img, .swiper-slide-duplicate-active .top-fv__img {
    animation: unset !important;
  }
}
@media screen and (min-width: 769px), print {
  .top-fv__wrap {
    padding: 1.756954612vw 1.756954612vw 0;
  }
  .top-fv__logo {
    position: absolute;
    top: 2.635431918vw;
    left: 3.513909224vw;
    width: 20.0585651537vw;
  }
  .top-fv__fig {
    aspect-ratio: 1218/720;
    mask: url(../img/top/fv/fv_bg.svg) center center no-repeat;
    mask-size: cover;
  }
  .top-fv__btns {
    bottom: 2.3426061493vw;
    left: 2.3426061493vw;
    width: 8.4919472914vw;
    height: 2.3426061493vw;
  }
  .top-fv__prev, .top-fv__next {
    width: 2.3426061493vw;
    height: 2.3426061493vw;
  }
}
@media screen and (min-width: 769px) and (any-hover: hover), print and (any-hover: hover) {
  .top-fv__prev:hover .top-fv__arrow::after, .top-fv__next:hover .top-fv__arrow::after {
    animation: arrow 0.6s;
  }
}
@media screen and (min-width: 769px), print {
  .top-fv__prev {
    left: 3.074670571vw;
  }
  .top-fv__arrow {
    width: 0.878477306vw;
    height: 0.8052708638vw;
  }
  .top-fv__toggle {
    width: 2.3426061493vw;
    height: 2.3426061493vw;
  }
  .top-fv__toggle span {
    width: 0.5856515373vw;
    height: 0.878477306vw;
  }
  .top-fv__toggle span::before, .top-fv__toggle span::after {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    content: "";
    background-color: #fff;
  }
  .top-fv__toggle span::before {
    left: 0;
  }
  .top-fv__toggle span::after {
    right: 0;
  }
  .top-fv__toggle.paused span {
    width: 0.5856515373vw;
    height: 0.7320644217vw;
  }
  .top-fv__toggle.paused span::before, .top-fv__toggle.paused span::after {
    display: none;
  }
  .top-fv__bnrs {
    right: 1.1713030747vw;
    bottom: 1.1713030747vw;
    width: 17.5695461201vw;
  }
  .top-fv__bnr-link {
    border-radius: 0.7320644217vw;
  }
}
@media screen and (max-width: 768px) {
  .top-fv__wrap {
    padding: 8.5333333333vw 0 15.2vw;
  }
  .top-fv__logo {
    width: 55.4666666667vw;
    margin-left: 6.6666666667vw;
  }
  .top-fv__lead {
    width: 74.6666666667vw;
    margin: 5.3333333333vw 0 8.5333333333vw 6.6666666667vw;
  }
  .top-fv__lead img {
    width: 100%;
  }
  .top-fv__icon {
    position: absolute;
    width: 6.9333333333vw;
    top: 19.7333333333vw;
    right: 5.3333333333vw;
  }
  .top-fv__icon img {
    width: 100%;
  }
  .top-fv__fig {
    aspect-ratio: 375/420;
  }
  .top-fv__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .top-fv__btns {
    bottom: 6.6666666667vw;
    left: 6.6666666667vw;
    width: 24.5333333333vw;
    height: 6.4vw;
  }
  .top-fv__prev, .top-fv__next {
    width: 6.4vw;
    height: 6.4vw;
  }
  .top-fv__prev {
    left: 9.0666666667vw;
  }
  .top-fv__arrow {
    width: 2.6666666667vw;
    height: 2.4vw;
  }
  .top-fv__toggle {
    width: 6.4vw;
    height: 6.4vw;
  }
  .top-fv__toggle span {
    width: 1.6vw;
    height: 2.1333333333vw;
  }
  .top-fv__toggle span::before, .top-fv__toggle span::after {
    content: "";
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: #fff;
  }
  .top-fv__toggle span::before {
    left: 0;
  }
  .top-fv__toggle span::after {
    right: 0;
  }
  .top-fv__toggle.paused span {
    width: 1.6vw;
    height: 2vw;
  }
  .top-fv__toggle.paused span::before, .top-fv__toggle.paused span::after {
    display: none;
  }
  .top-fv__bnrs {
    right: 3.2vw;
    bottom: 3.2vw;
    width: 42.6666666667vw;
  }
  .top-fv__bnr-link {
    border-radius: 1.6vw;
  }
}

/* /cafe/_top-journal.scss
-------------------------------------------------- */
.top-journal__hgroup {
  display: flex;
  justify-content: left;
  align-items: center;
}
.top-journal__en {
  font-family: "Satoshi", sans-serif;
  font-weight: 900;
}
.top-journal__ttl {
  font-weight: 700;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
}
.top-journal__list {
  position: relative;
}
.top-journal__item {
  position: relative;
  overflow: hidden;
}
.top-journal__item:hover .top-journal__caption {
  color: #022729;
}
.top-journal__link {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.top-journal__fig {
  width: 100%;
  overflow: hidden;
}
.top-journal__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.top-journal__box {
  background-color: #fff;
}
.top-journal__caption {
  color: #022729;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.top-journal__tagbox {
  width: 100%;
  overflow-x: auto;
  position: relative;
  z-index: 1;
}
.top-journal__tags {
  display: flex;
  width: fit-content;
}
#container .top-journal__tags {
  min-width: inherit;
}
.top-journal__tag {
  width: fit-content;
  display: block;
  color: #022729;
  font-weight: 500;
  background-color: #E2F5F2;
  white-space: nowrap;
  border: 1px solid #CCE0DE;
  border-radius: 999px;
}
#container .top-journal__tag {
  min-width: inherit;
}
.top-journal__prev, .top-journal__next {
  position: absolute;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  background-color: #022729;
  border-radius: 999px;
  cursor: pointer;
}
.top-journal__prev.slick-disabled, .top-journal__next.slick-disabled {
  opacity: 0.3;
  pointer-events: none;
}
.top-journal__prev {
  transform: rotate(180deg);
}
.top-journal__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.top-journal__arrow::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  mask: url(../img/common/arrow.svg) center center no-repeat;
  mask-size: cover;
  background-color: #fff;
}
@media screen and (min-width: 769px), print {
  .top-journal__wrap {
    padding: 5.3440702782vw 0 3.074670571vw 4.6852122987vw;
  }
  .top-journal__hgroup {
    gap: 0 1.1713030747vw;
  }
  .top-journal__en {
    font-size: 1.756954612vw;
    line-height: 1;
  }
  .top-journal__ttl {
    font-size: 1.317715959vw;
    line-height: 1.3333333333em;
  }
  .top-journal__list {
    margin-top: 2.1229868228vw;
  }
  .top-journal__item {
    margin: 0 1.1713030747vw;
    width: 20.9370424597vw;
    border-radius: 0.878477306vw;
  }
  .top-journal__item:hover .top-journal__img {
    transform: scale(1.08);
  }
  .top-journal__item:hover .top-journal__caption {
    text-decoration-color: #022729;
  }
  .top-journal__fig {
    aspect-ratio: 286/191;
  }
  .top-journal__img {
    transition: transform 0.3s ease-out;
  }
  .top-journal__box {
    padding: 1.9765739385vw 1.4641288433vw calc(2.3426061493vw - 15px);
  }
  .top-journal__caption {
    min-height: 4.39238653vw;
    font-size: 1.0248901903vw;
    line-height: 1.4285714286em;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.3s ease-out;
  }
  #container .top-journal__caption {
    min-height: 4.39238653vw;
  }
  .top-journal__tagbox {
    min-height: calc(3.074670571vw + 15px) !important;
  }
  .top-journal__tags {
    margin-top: 1.3909224012vw;
    gap: 0 0.5856515373vw;
  }
  .top-journal__tag {
    padding: 0.1464128843vw 0.6588579795vw 0.2196193265vw;
    font-size: 0.7320644217vw;
    line-height: 1.6em;
    transition: color 0.2s linear, background-color 0.2s linear, border-color 0.2s linear;
  }
  .top-journal__tag:hover {
    color: #fff;
    background-color: #022729;
    border-color: #022729;
  }
  .top-journal__prev, .top-journal__next {
    bottom: -6.7349926794vw;
    width: 3.513909224vw;
    height: 3.513909224vw;
    border: 2px solid #022729;
    transition: background-color 0.2s linear;
  }
  .top-journal__prev:hover, .top-journal__next:hover {
    background-color: #fff;
  }
  .top-journal__prev:hover .top-journal__arrow::after, .top-journal__next:hover .top-journal__arrow::after {
    animation: arrow 0.6s;
    background-color: #022729;
  }
  .top-journal__prev {
    left: 0;
  }
  .top-journal__next {
    left: 4.6852122987vw;
  }
  .top-journal__arrow {
    width: 1.0248901903vw;
    height: 0.9516837482vw;
  }
  .top-journal__arrow::after {
    transition: background-color 0.2s linear;
  }
  .top-journal__btn {
    margin: 2.9282576867vw auto 0;
  }
}
@media screen and (max-width: 768px) {
  .top-journal__wrap {
    padding: 0 0 10.6666666667vw 6.6666666667vw;
  }
  .top-journal__hgroup {
    gap: 0 4.2666666667vw;
  }
  .top-journal__en {
    font-size: 6.4vw;
    line-height: 1;
  }
  .top-journal__ttl {
    font-size: 3.7333333333vw;
    line-height: 1.4285714286em;
  }
  .top-journal__list {
    margin-top: 6.6666666667vw;
  }
  .top-journal__item {
    margin: 0 3.2vw;
    width: 69.3333333333vw;
    border-radius: 2.1333333333vw;
  }
  .top-journal__fig {
    aspect-ratio: 260/173;
  }
  .top-journal__box {
    padding: 5.0666666667vw 5.3333333333vw 6.4vw;
  }
  .top-journal__caption {
    min-height: 16vw;
    font-size: 3.7333333333vw;
    line-height: 1.4285714286em;
  }
  #container .top-journal__caption {
    min-height: 16vw;
  }
  .top-journal__tagbox {
    padding-bottom: 0.5333333333vw;
  }
  .top-journal__tags {
    margin-top: 4vw;
    gap: 0 1.6vw;
  }
  .top-journal__tag {
    padding: 0.5333333333vw 2.4vw 0.8vw;
    font-size: 2.6666666667vw;
    line-height: 1.6em;
  }
  .top-journal__prev, .top-journal__next {
    top: 50%;
    transform: translateY(-50%);
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    z-index: 1;
  }
  .top-journal__prev {
    left: -4vw;
    transform: translateY(-50%) rotate(180deg);
  }
  .top-journal__next {
    right: 4vw;
  }
  .top-journal__arrow {
    width: 3.2vw;
    height: 2.9333333333vw;
  }
  .top-journal__btn {
    margin: 8.5333333333vw 0 0 5.3333333333vw;
  }
}

/* /cafe/_top-about.scss
-------------------------------------------------- */
.top-about__en {
  font-family: "Satoshi", sans-serif;
  font-weight: 900;
  letter-spacing: 0.01em;
}
.top-about__ttl {
  padding: 0;
  margin: 0;
  font-weight: 700;
  letter-spacing: 0;
}
.top-about__lead {
  font-weight: 600;
}
.top-about__fellow, .top-about__thing, .top-about__object {
  position: absolute;
}
.top-about__fellow::before, .top-about__thing::before, .top-about__object::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  content: "";
  background: url(../img/top/about/shape_bg.png) center center no-repeat;
  background-size: 100% 100%;
  transform: translate(-50%, -50%);
  animation: shapeBg linear infinite;
}
.top-about__fellow-box, .top-about__thing-box, .top-about__object-box {
  position: absolute;
  width: fit-content;
}
.top-about__fellow-txt, .top-about__thing-txt, .top-about__object-txt {
  color: #022729;
  text-align: center;
}
.top-about__fellow::before {
  animation-duration: 11s;
}
.top-about__thing::before {
  animation-duration: 13s;
  animation-delay: 2s;
}
.top-about__object::before {
  animation-duration: 12s;
  animation-delay: 4s;
}
.top-about__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.top-about__logo img {
  width: 100%;
}
.top-about__caption {
  text-align: center;
}
.top-about__contents {
  background-color: #fff;
}
.top-about__txt {
  font-weight: 500;
}
.top-about__fig {
  width: 100%;
  overflow: hidden;
}
.top-about__img {
  width: 100%;
}
.top-about__link {
  position: relative;
  display: block;
  box-sizing: border-box;
  font-weight: 600;
  color: #fff;
  text-align: center;
  background-color: #022729;
}
.top-about__arrow {
  position: absolute;
  top: 50%;
  overflow: hidden;
  transform: translateY(-50%);
}
.top-about__arrow::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: #fff;
  mask: url(../img/common/arrow.svg) center center no-repeat;
  mask-size: contain;
}
.top-about__bnr {
  display: block;
}
.top-about__bnr-img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 769px), print {
  .top-about__wrap {
    padding: 3.8799414348vw 4.6852122987vw 0;
  }
  .top-about__main {
    position: relative;
    width: 76.2079062958vw;
    margin: 0 auto;
  }
  .top-about__en {
    font-size: 1.317715959vw;
    line-height: 1.3333333333em;
  }
  .top-about__ttl {
    margin-top: 0.7320644217vw;
    font-size: 2.3426061493vw;
    line-height: 1.15625em;
  }
  .top-about__lead {
    margin-top: 2.3426061493vw;
    font-size: 1.1713030747vw;
    line-height: 1.875em;
  }
  .top-about__shapes {
    position: absolute;
    top: 0;
    right: 0;
    width: 31.6251830161vw;
    height: 29.6486090776vw;
  }
  .top-about__fellow, .top-about__thing, .top-about__object {
    width: 17.5695461201vw;
    height: 17.5695461201vw;
  }
  .top-about__fellow-txt, .top-about__thing-txt, .top-about__object-txt {
    margin-top: 0.878477306vw;
    font-size: 0.7320644217vw;
    font-weight: 700;
    line-height: 1.4em;
  }
  .top-about__fellow {
    top: 1.0980966325vw;
    left: 7.027818448vw;
  }
  .top-about__fellow-box {
    top: 4.39238653vw;
    left: 50%;
    transform: translateX(-50%);
  }
  .top-about__fellow-img {
    width: 6.8814055637vw;
  }
  .top-about__thing {
    bottom: 1.0980966325vw;
    left: 1.0980966325vw;
  }
  .top-about__thing-box {
    bottom: 4.3191800878vw;
    left: 4.39238653vw;
  }
  .top-about__thing-img {
    width: 5.8565153734vw;
  }
  .top-about__object {
    right: 1.0980966325vw;
    bottom: 1.0980966325vw;
  }
  .top-about__object-box {
    right: 4.39238653vw;
    bottom: 4.3191800878vw;
  }
  .top-about__object-img {
    width: 5.7833089312vw;
  }
  .top-about__logo {
    width: 12.5915080527vw;
  }
  .top-about__btn {
    margin-top: 2.3426061493vw;
  }
  .top-about__list {
    margin-top: 13.3235724744vw;
  }
  .top-about__item + .top-about__item {
    margin-top: 2.9282576867vw;
  }
  .top-about__item:nth-child(1) .top-about__caption img {
    width: 12.0058565154vw;
  }
  .top-about__item:nth-child(2) .top-about__caption img {
    width: 10.1756954612vw;
  }
  .top-about__item:nth-child(3) .top-about__caption img {
    width: 10.1756954612vw;
  }
  .top-about__caption {
    width: 28.1112737921vw;
    height: 4.6852122987vw;
    background-color: #fff;
    mask: url(../img/top/about/about_bg.svg) center center no-repeat;
    mask-size: cover;
  }
  .top-about__caption img {
    margin-top: 2.196193265vw;
  }
  .top-about__contents {
    display: flex;
    gap: 0 2.9282576867vw;
    padding: 3.953147877vw 4.6852122987vw 3.513909224vw;
    border-radius: 0 1.1713030747vw 1.1713030747vw 1.1713030747vw;
  }
  .top-about__textbox {
    flex: 1;
  }
  .top-about__txt {
    font-size: 1.1713030747vw;
    line-height: 1.875em;
  }
  .top-about__txt + .top-about__txt {
    margin-top: 1.0248901903vw;
  }
  .top-about__icons {
    display: flex !important;
    margin-top: 2.3426061493vw;
  }
  .top-about__icon {
    width: 14.2020497804vw;
  }
  .top-about__icon:not(:first-child) {
    border-left: 1px dashed #022729;
  }
  .top-about__icon img {
    width: 100%;
  }
  .top-about__figbox {
    width: 28.5505124451vw;
    margin-top: 0.7320644217vw;
  }
  .top-about__fig {
    border-radius: 0.878477306vw;
  }
  .top-about__link {
    width: 13.17715959vw;
    padding: 0.7320644217vw 1.9033674963vw 0.7320644217vw 0;
    margin-top: 1.4641288433vw;
    margin-left: auto;
    font-size: 0.878477306vw;
    line-height: 1.8333333333em;
    text-align: center;
    border: 2px solid #022729;
    border-radius: 0.5856515373vw;
    transition: background-color 0.2s linear, color 0.2s linear;
  }
}
@media screen and (min-width: 769px) and (any-hover: hover), print and (any-hover: hover) {
  .top-about__link:hover {
    color: #022729;
    background-color: #fff;
  }
  .top-about__link:hover .top-about__arrow::after {
    background-color: #022729;
    animation: arrow 0.6s;
  }
}
@media screen and (min-width: 769px), print {
  .top-about__arrow {
    right: 2.5622254758vw;
    width: 0.7320644217vw;
    height: 0.6588579795vw;
  }
  .top-about__arrow::after {
    transition: background-color 0.2s linear;
  }
  .top-about__bnr {
    position: relative;
    margin-top: 2.3426061493vw;
  }
}
@media screen and (min-width: 769px) and (any-hover: hover), print and (any-hover: hover) {
  .top-about__bnr::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    pointer-events: none;
    content: "";
    background: url(../img/top/about/bnr_20th_hover-lg.svg) no-repeat center center/100% auto;
  }
}
@media screen and (min-width: 769px), print {
  .top-about__bnr-img {
    position: relative;
    z-index: 2;
    transition: opacity 0.2s linear;
  }
}
@media screen and (min-width: 769px) and (any-hover: hover), print and (any-hover: hover) {
  .top-about__bnr:hover .top-about__bnr-img {
    opacity: 0;
  }
}
@media screen and (max-width: 768px) {
  .top-about__wrap {
    padding: 8.8vw 6.6666666667vw 0;
  }
  .top-about__hgroup {
    text-align: center;
  }
  .top-about__en {
    font-size: 3.7333333333vw;
    line-height: 1.7142857143em;
  }
  .top-about__ttl {
    margin-top: 2.4vw;
    font-size: 7.4666666667vw;
    line-height: 1.2142857143em;
  }
  .top-about__lead {
    margin-top: 4.5333333333vw;
    font-size: 4vw;
    line-height: 2em;
    text-align: center;
  }
  .top-about__shapes {
    position: relative;
    width: 86.6666666667vw;
    height: 86.6666666667vw;
    margin: 10.4vw auto 0;
  }
  .top-about__fellow, .top-about__thing, .top-about__object {
    width: 53.3333333333vw;
    height: 53.3333333333vw;
  }
  .top-about__fellow-txt, .top-about__thing-txt, .top-about__object-txt {
    margin-top: 2.6666666667vw;
    font-size: 2.6666666667vw;
    line-height: 1.4em;
  }
  .top-about__fellow {
    top: 0;
    left: 16.5333333333vw;
  }
  .top-about__fellow-box {
    top: 10.6666666667vw;
    left: 50%;
    transform: translateX(-50%);
  }
  .top-about__fellow-img {
    width: 21.8666666667vw;
  }
  .top-about__thing {
    bottom: 0;
    left: 0;
  }
  .top-about__thing-box {
    bottom: 10.6666666667vw;
    left: 10.6666666667vw;
  }
  .top-about__thing-img {
    width: 18.4vw;
  }
  .top-about__object {
    right: 0;
    bottom: 0;
  }
  .top-about__object-box {
    right: 10.6666666667vw;
    bottom: 10.6666666667vw;
  }
  .top-about__object-img {
    width: 18.4vw;
  }
  .top-about__logo {
    width: 28.5333333333vw;
  }
  .top-about__btn {
    margin: 8.5333333333vw auto 0;
  }
  .top-about__list {
    margin-top: 17.0666666667vw;
  }
  .top-about__item + .top-about__item {
    margin-top: 8.5333333333vw;
  }
  .top-about__item:nth-child(1) .top-about__caption img {
    width: 37.3333333333vw;
  }
  .top-about__item:nth-child(2) .top-about__caption img {
    width: 31.7333333333vw;
  }
  .top-about__item:nth-child(3) .top-about__caption img {
    width: 31.7333333333vw;
  }
  .top-about__caption {
    width: 54.6666666667vw;
    height: 17.0666666667vw;
    background-color: #fff;
    mask: url(../img/top/about/about_bg_sp.svg) center center no-repeat;
    mask-size: cover;
  }
  .top-about__caption img {
    margin-top: 5.3333333333vw;
    margin-right: 5.3333333333vw;
  }
  .top-about__contents {
    padding: 6.9333333333vw 5.3333333333vw 8.5333333333vw;
    margin-top: -0.2666666667vw;
    border-radius: 0 3.2vw 3.2vw 3.2vw;
  }
  .top-about__txt {
    font-size: 3.7333333333vw;
    line-height: 1.5714285714em;
  }
  .top-about__txt + .top-about__txt {
    margin-top: 3.2vw;
  }
  .top-about__figbox {
    width: 100%;
    margin-top: 6.9333333333vw;
  }
  .top-about__fig {
    border-radius: 2.1333333333vw;
  }
  .top-about__link {
    width: 48vw;
    padding: 2.6666666667vw 6.9333333333vw 2.6666666667vw 0;
    margin: 6.4vw auto 0;
    font-size: 3.2vw;
    line-height: 1.8333333333em;
    text-align: center;
    border-radius: 2.1333333333vw;
  }
  .top-about__arrow {
    right: 9.3333333333vw;
    width: 2.6666666667vw;
    height: 2.4vw;
  }
  .top-about__bnr {
    width: 100%;
    margin-top: 8.5333333333vw;
  }
}

/* /cafe/_top-friends.scss
-------------------------------------------------- */
.top-friends__ttl {
  padding: 0;
}
.top-friends__ttl img {
  width: 100%;
}
.top-friends__lead {
  text-align: center;
}
.top-friends__list {
  display: flex;
  flex-wrap: wrap;
}
.top-friends__item {
  background-color: #fff;
}
.top-friends__item:nth-child(n+6) .top-friends__fig::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, transparent 40%, rgba(226, 245, 242, 0.8) 90%, rgba(226, 245, 242, 0.8) 100%);
  pointer-events: none;
}
.top-friends__btn {
  margin: 0;
  padding: 0;
  font-size: 100%;
  color: inherit;
  line-height: inherit;
  vertical-align: baseline;
  background: initial;
  border: 0;
}
.top-friends__fig {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.top-friends__fig::after {
  content: "";
  position: absolute;
  border: 1px solid #fff;
  border-radius: 999px;
  background: url(../img/common/plus.svg) center center no-repeat;
  background-color: #022729;
}
.top-friends__img {
  width: 100%;
}
.top-friends__caption {
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 769px), print {
  .top-friends__wrap {
    padding: 7.3206442167vw 4.6852122987vw 9.2972181552vw;
  }
  .top-friends__ttl {
    width: 35.8711566618vw;
    margin: 0 auto;
  }
  .top-friends__lead {
    margin-top: 1.8301610542vw;
    font-size: 1.1713030747vw;
    line-height: 1.5em;
  }
  .top-friends__list {
    margin-top: 3.1478770132vw;
    gap: 1.1713030747vw;
  }
  .top-friends__item {
    width: calc((100% - 4.6852122987vw) / 5);
    border-radius: 0.7320644217vw;
  }
  .top-friends__btn {
    padding: 1.756954612vw 1.756954612vw 1.9765739385vw;
    transition: opacity 0.2s linear;
    cursor: pointer;
  }
  .top-friends__btn:hover .top-friends__img {
    transform: scale(1.08);
  }
  .top-friends__fig {
    border-radius: 0.7320644217vw;
  }
  .top-friends__fig::after {
    bottom: 0.7320644217vw;
    right: 0.7320644217vw;
    width: 1.756954612vw;
    height: 1.756954612vw;
    background-size: 0.8052708638vw 1.0248901903vw;
  }
  .top-friends__img {
    transition: transform 0.3s ease-out;
  }
  .top-friends__caption {
    margin-top: 1.0248901903vw;
    font-size: 1.0980966325vw;
    line-height: 1.4666666667em;
  }
}
@media screen and (max-width: 768px) {
  .top-friends__wrap {
    padding: 21.3333333333vw 6.6666666667vw 25.6vw;
  }
  .top-friends__ttl {
    width: 100%;
  }
  .top-friends__lead {
    margin-top: 2.6666666667vw;
    font-size: 3.7333333333vw;
    line-height: 1.4285714286em;
  }
  .top-friends__list {
    margin: 11.7333333333vw auto 0;
    width: 100%;
    gap: 4vw;
  }
  .top-friends__item {
    width: calc((100% - 4vw) / 2);
    border-radius: 2.1333333333vw;
  }
  .top-friends__btn {
    padding: 4vw;
  }
  .top-friends__fig {
    border-radius: 2.1333333333vw;
  }
  .top-friends__fig::after {
    bottom: 2.6666666667vw;
    right: 2.6666666667vw;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    background-size: 2.1333333333vw 2.4vw;
  }
  .top-friends__caption {
    margin-top: 2.9333333333vw;
    font-size: 3.2vw;
    line-height: 1.4166666667em;
  }
}

/* /cafe/_top-how.scss
-------------------------------------------------- */
.top-how {
  background-color: #fff;
}
.top-how__en {
  font-family: "Satoshi", sans-serif;
  font-weight: 900;
  letter-spacing: 0.01em;
}
.top-how__ttl {
  margin: 0;
  padding: 0;
  letter-spacing: 0;
  font-weight: 700;
}
.top-how__txt {
  font-weight: 600;
}
.top-how__fig {
  overflow: hidden;
}
.top-how__fig img {
  width: 100%;
}
@media screen and (min-width: 769px), print {
  .top-how__wrap {
    padding: 3.513909224vw 4.6852122987vw;
  }
  .top-how__contents {
    display: flex;
    align-items: center;
    gap: 0 3.513909224vw;
  }
  .top-how__box {
    flex: 1;
  }
  .top-how__en {
    font-size: 1.317715959vw;
    line-height: 1.3333333333em;
  }
  .top-how__ttl {
    margin-top: 0.6588579795vw;
    font-size: 2.3426061493vw;
    line-height: 1.21875em;
  }
  .top-how__txt {
    margin-top: 2.4890190337vw;
    font-size: 1.1713030747vw;
    line-height: 1.5em;
  }
  .top-how__btn {
    margin-top: 2.5622254758vw;
  }
  .top-how__fig {
    width: 40.1903367496vw;
    border-radius: 0.878477306vw;
  }
}
@media screen and (max-width: 768px) {
  .top-how__wrap {
    padding: 19.4666666667vw 6.6666666667vw 21.3333333333vw;
  }
  .top-how__hgroup {
    text-align: center;
  }
  .top-how__en {
    font-size: 3.7333333333vw;
    line-height: 1.7142857143em;
  }
  .top-how__ttl {
    margin-top: 2.4vw;
    font-size: 7.4666666667vw;
    line-height: 1.2142857143em;
  }
  .top-how__txt {
    margin-top: 5.6vw;
    font-size: 4vw;
    line-height: 1.4666666667em;
    text-align: center;
  }
  .top-how__fig {
    margin-top: 7.2vw;
    width: 100%;
    border-radius: 2.6666666667vw;
  }
  .top-how__btn {
    margin: 8.5333333333vw auto 0;
  }
}

/* /cafe/_top-spot.scss
-------------------------------------------------- */
.top-spot {
  background-color: #CEEDF2;
}
.top-spot__en {
  font-family: "Satoshi", sans-serif;
  font-weight: 900;
  letter-spacing: 0.01em;
}
.top-spot__ttl {
  margin: 0;
  padding: 0;
  letter-spacing: 0;
  font-weight: 700;
}
.top-spot__txt {
  font-weight: 600;
}
.top-spot__fig {
  overflow: hidden;
}
.top-spot__fig img {
  width: 100%;
}
@media screen and (min-width: 769px), print {
  .top-spot__wrap {
    padding: 3.513909224vw 4.6852122987vw;
  }
  .top-spot__contents {
    display: flex;
    align-items: center;
    gap: 0 3.513909224vw;
  }
  .top-spot__box {
    flex: 1;
  }
  .top-spot__en {
    font-size: 1.317715959vw;
    line-height: 1.3333333333em;
  }
  .top-spot__ttl {
    margin-top: 0.6588579795vw;
    font-size: 2.3426061493vw;
    line-height: 1.21875em;
  }
  .top-spot__ttl span {
    display: inline-block !important;
  }
  .top-spot__txt {
    margin-top: 2.4890190337vw;
    font-size: 1.1713030747vw;
    line-height: 1.5em;
  }
  .top-spot__btn {
    margin-top: 2.5622254758vw;
  }
  .top-spot__fig {
    width: 40.1903367496vw;
    border-radius: 0.878477306vw;
  }
}
@media screen and (max-width: 768px) {
  .top-spot__wrap {
    padding: 19.4666666667vw 6.6666666667vw 21.3333333333vw;
  }
  .top-spot__hgroup {
    text-align: center;
  }
  .top-spot__en {
    font-size: 3.7333333333vw;
    line-height: 1.7142857143em;
  }
  .top-spot__ttl {
    margin-top: 2.4vw;
    font-size: 7.4666666667vw;
    line-height: 1.2142857143em;
  }
  .top-spot__txt {
    margin-top: 5.6vw;
    font-size: 4vw;
    line-height: 1.4666666667em;
    text-align: center;
  }
  .top-spot__fig {
    margin-top: 7.2vw;
    width: 100%;
    border-radius: 2.6666666667vw;
  }
  .top-spot__btn {
    margin: 8.5333333333vw auto 0;
  }
}

/* /cafe/_top-modal.scss

-------------------------------------------------- */
.top-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
  opacity: 0;
  z-index: 10002;
  background-color: rgba(255, 255, 255, 0.7);
}
.top-modal.is-active {
  opacity: 1;
  pointer-events: inherit;
}
.top-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.top-modal__content {
  position: relative;
}
.top-modal__close {
  position: absolute;
  font-size: 0;
  z-index: 1;
}
.top-modal__close::before, .top-modal__close::after {
  content: "";
  position: absolute;
  height: 2px;
  background-color: #022729;
  top: 50%;
  left: 50%;
}
.top-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.top-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.top-modal__slider {
  position: relative;
}
.top-modal__item {
  box-sizing: border-box;
  background-color: #457366;
  border: solid #fff;
}
.top-modal__fig {
  overflow: hidden;
}
.top-modal__img {
  width: 100%;
}
.top-modal__caption {
  color: #fff;
  font-weight: 700;
  text-align: center;
  border-bottom: 1px dashed #fff;
}
.top-modal__txt {
  color: #fff;
  font-weight: 500;
}
.top-modal__heading {
  color: #fff;
  font-weight: 700;
}
.top-modal__link {
  display: inline-block;
  color: #fff;
  font-weight: 400;
  text-decoration: underline;
}
.top-modal__link[target=_blank]::after {
  content: "";
  display: inline-block;
  background: url(../img/common/blank.svg) center center no-repeat;
  background-size: contain;
}
.top-modal__prev, .top-modal__next {
  margin: 0;
  padding: 0;
  font-size: 100%;
  color: inherit;
  line-height: inherit;
  vertical-align: baseline;
  background: initial;
  border: 0;
  box-sizing: border-box;
  position: absolute;
  background-color: #fff;
  border: 1px solid #022729;
  border-radius: 50%;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  z-index: 1;
}
.top-modal__prev.slick-disabled, .top-modal__next.slick-disabled {
  border: 1px solid #fff;
  opacity: 0.3;
}
.top-modal__prev::after, .top-modal__next::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  mask: url(../img/common/arrow.svg) center center no-repeat;
  mask-size: cover;
  background-color: #022729;
}
.top-modal__prev {
  transform: rotate(180deg);
}
@media screen and (min-width: 769px), print {
  .top-modal__content {
    width: 45.168374817vw;
    margin: 0 auto;
  }
  .top-modal__close {
    padding: 0.7320644217vw;
    top: 1.4641288433vw;
    right: -1.4641288433vw;
    width: 1.756954612vw;
    height: 1.756954612vw;
    cursor: pointer;
    transition: opacity 0.2s linear;
  }
  .top-modal__close:hover {
    opacity: 0.7;
  }
  .top-modal__close::before, .top-modal__close::after {
    width: 2.4158125915vw;
  }
  .top-modal__item {
    padding: 2.5622254758vw 2.4890190337vw;
    margin: 2.196193265vw;
    width: 40.775988287vw;
    min-height: 43.5578330893vw;
    border-width: 5px;
    border-radius: 1.1713030747vw;
    box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.15);
  }
  #container .top-modal__item {
    min-height: 43.5578330893vw;
  }
  .top-modal__fig {
    width: 16.1054172767vw;
    margin: 0 auto;
    border-radius: 0.7320644217vw;
  }
  .top-modal__caption {
    margin-top: 1.317715959vw;
    padding-bottom: 1.0248901903vw;
    font-size: 1.0980966325vw;
    line-height: 1.4666666667em;
  }
  .top-modal__txt {
    margin-top: 1.317715959vw;
    font-size: 0.9516837482vw;
    line-height: 1.5384615385em;
  }
  .top-modal__heading {
    margin-top: 1.0248901903vw;
    font-size: 0.9516837482vw;
    line-height: 1.5384615385em;
  }
  .top-modal__link {
    margin-top: 0.6588579795vw;
    font-size: 0.878477306vw;
    line-height: 1.3333333333em;
  }
  .top-modal__link:hover {
    text-decoration: none;
  }
  .top-modal__link[target=_blank]::after {
    width: 1.0248901903vw;
    height: 1.0248901903vw;
    margin-left: 0.7320644217vw;
  }
  .top-modal__prev, .top-modal__next {
    bottom: 5.1244509517vw;
    width: 2.3426061493vw;
    height: 2.3426061493vw;
    cursor: pointer;
    transition: opacity 0.2s linear;
  }
  .top-modal__prev:hover, .top-modal__next:hover {
    opacity: 0.7;
  }
  .top-modal__prev::after, .top-modal__next::after {
    width: 0.878477306vw;
    height: 0.8052708638vw;
  }
  .top-modal__prev {
    right: 8.345534407vw;
  }
  .top-modal__next {
    right: 5.1244509517vw;
  }
}
@media screen and (max-width: 768px) {
  .top-modal__content {
    padding-top: 10.6666666667vw;
    width: 94.6666666667vw;
    margin: 0 auto;
    max-height: 90vh;
    overflow-y: scroll;
  }
  .top-modal__close {
    top: 4vw;
    right: 4vw;
    width: 6.4vw;
    height: 6.4vw;
  }
  .top-modal__close::before, .top-modal__close::after {
    width: 8.8vw;
  }
  .top-modal__item {
    padding: 9.6vw 5.3333333333vw 19.2vw;
    margin: 4vw;
    width: 86.6666666667vw;
    min-height: 164.8vw;
    border-width: 4px;
    border-radius: 3.2vw;
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  }
  #container .top-modal__item {
    min-height: 164.8vw;
  }
  .top-modal__fig {
    width: 65.3333333333vw;
    margin: 0 auto;
    border-radius: 2.6666666667vw;
  }
  .top-modal__caption {
    margin-top: 4.8vw;
    padding: 0 1em 3.4666666667vw;
    font-size: 4vw;
    line-height: 1.4666666667em;
  }
  .top-modal__txt {
    margin-top: 4.8vw;
    font-size: 3.4666666667vw;
    line-height: 1.5384615385em;
  }
  .top-modal__heading {
    margin-top: 3.4666666667vw;
    font-size: 3.4666666667vw;
    line-height: 1.5384615385em;
  }
  .top-modal__link {
    margin-top: 2.6666666667vw;
    font-size: 3.2vw;
    line-height: 1.3333333333em;
    word-break: break-all;
  }
  .top-modal__link[target=_blank]::after {
    position: relative;
    top: 0.5333333333vw;
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    margin-left: 1.6vw;
  }
  .top-modal__prev, .top-modal__next {
    bottom: 10.4vw;
    width: 8.5333333333vw;
    height: 8.5333333333vw;
  }
  .top-modal__prev::after, .top-modal__next::after {
    width: 3.2vw;
    height: 2.9333333333vw;
  }
  .top-modal__prev {
    right: 22.1333333333vw;
  }
  .top-modal__next {
    right: 10.4vw;
  }
}

/* /cafe/_top-banner.scss
-------------------------------------------------- */
.top-banner {
  position: sticky;
  z-index: 5;
  transition: opacity 0.2s linear;
}
.top-banner.is-fadeout {
  opacity: 0;
  pointer-events: none;
}
.top-banner__link {
  display: block;
  z-index: 1;
}
.top-banner__img {
  width: 100%;
}
@media screen and (min-width: 769px), print {
  .top-banner {
    bottom: 1.1713030747vw;
    margin-top: -8.78477306vw;
    margin-left: auto;
    right: 1.1713030747vw;
    width: 17.5695461201vw;
  }
  .top-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 0.7320644217vw;
  }
  .top-banner__link {
    position: relative;
    transition: opacity 0.2s linear;
  }
  .top-banner__link:hover {
    opacity: 0.7;
  }
}
@media screen and (max-width: 768px) {
  .top-banner {
    bottom: 3.2vw;
    margin-top: -21.3333333333vw;
    margin-left: auto;
    right: 3.2vw;
    width: 42.6666666667vw;
  }
}