/* /cafe/about/_about.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;
  }
}
.about-contact__btn {
  position: relative;
  display: block;
  box-sizing: border-box;
  color: #fff;
  font-weight: 600;
  background-color: #022729;
}
.about-contact__btn span {
  display: block;
  text-align: center;
  border-right: 1px solid #809394;
}
.about-contact__btn i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}
.about-contact__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 {
  .about-contact__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;
  }
  .about-contact__btn span {
    font-size: 0.878477306vw;
    line-height: 2.0833333333em;
    transition: border-right-color 0.2s linear;
  }
  .about-contact__btn:hover {
    background-color: #fff;
    color: #022729;
  }
  .about-contact__btn:hover span {
    border-right-color: #022729;
  }
  .about-contact__btn:hover i::after {
    animation: arrow 0.6s;
    background-color: #022729;
  }
  .about-contact__btn i {
    right: 1.2445095168vw;
    width: 0.7320644217vw;
    height: 0.6588579795vw;
  }
  .about-contact__btn i::after {
    transition: background-color 0.2s linear;
  }
}
@media screen and (max-width: 768px) {
  .about-contact__btn {
    padding: 3.2vw 10.6666666667vw 3.2vw 6.4vw;
    width: 76vw;
    border-radius: 3.2vw;
  }
  .about-contact__btn span {
    font-size: 3.2vw;
    line-height: 2.0833333333em;
  }
  .about-contact__btn i {
    right: 4.5333333333vw;
    width: 2.6666666667vw;
    height: 2.4vw;
  }
}

.main {
  overflow: hidden;
}

.js-about-fade {
  opacity: 0.3;
  transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.js-about-fade.on {
  opacity: 1;
}

.about__en {
  font-family: "Satoshi", sans-serif;
  font-weight: 900;
  letter-spacing: 0.01em;
}
.about__ttl {
  font-weight: 700;
}
.about__txt {
  font-weight: 600;
}
.about__fellow, .about__thing, .about__object {
  position: absolute;
}
.about__fellow::before, .about__thing::before, .about__object::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  content: "";
  background: url(../img/shape_bg.png) center center no-repeat;
  background-size: 100% 100%;
  animation: shapeBg linear infinite;
}
.about__fellow-box, .about__thing-box, .about__object-box {
  position: absolute;
  width: fit-content;
}
.about__fellow-txt, .about__thing-txt, .about__object-txt {
  color: #022729;
  text-align: center;
}
.about__fellow::before {
  animation-duration: 11s;
}
.about__thing::before {
  animation-duration: 13s;
  animation-delay: 2s;
}
.about__object::before {
  animation-duration: 12s;
  animation-delay: 4s;
}
.about__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.about__logo img {
  width: 100%;
}
.about__fig {
  width: 100%;
}
.about__img {
  width: 100%;
}
@media screen and (min-width: 769px), print {
  .about__wrap {
    padding: 3.513909224vw 4.6852122987vw 7.3206442167vw;
  }
  .about__header {
    width: 25.0366032211vw;
    padding-bottom: 3.074670571vw;
  }
  .about__header img {
    width: 100%;
  }
  .about__main {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 2.3426061493vw auto 0;
    width: 70.7174231332vw;
  }
  .about__en {
    font-size: 1.317715959vw;
  }
  .about__ttl {
    margin-top: 2.0497803807vw;
    font-size: 2.3426061493vw;
    line-height: 1.1875em;
  }
  .about__ttl img {
    width: 31.3323572474vw;
  }
  .about__txt {
    margin-top: 2.635431918vw;
    font-size: 1.1713030747vw;
    line-height: 2.5em;
  }
  .about__txt + .about__txt {
    margin-top: 2.7086383602vw;
  }
  .about__shapes {
    position: relative;
    width: 31.6251830161vw;
    height: 29.6486090776vw;
  }
  .about__fellow, .about__thing, .about__object {
    width: 17.5695461201vw;
    height: 17.5695461201vw;
  }
  .about__fellow-txt, .about__thing-txt, .about__object-txt {
    margin-top: 0.878477306vw;
    font-size: 0.7320644217vw;
    font-weight: 700;
    line-height: 1.4em;
  }
  .about__fellow {
    top: 1.0980966325vw;
    left: 7.027818448vw;
  }
  .about__fellow-box {
    top: 4.39238653vw;
    left: 50%;
    transform: translateX(-50%);
  }
  .about__fellow-img {
    width: 6.8814055637vw;
  }
  .about__thing {
    bottom: 1.0980966325vw;
    left: 1.0980966325vw;
  }
  .about__thing-box {
    bottom: 4.3191800878vw;
    left: 4.39238653vw;
  }
  .about__thing-img {
    width: 5.8565153734vw;
  }
  .about__object {
    right: 1.0980966325vw;
    bottom: 1.0980966325vw;
  }
  .about__object-box {
    right: 4.39238653vw;
    bottom: 4.3191800878vw;
  }
  .about__object-img {
    width: 5.7833089312vw;
  }
  .about__logo {
    width: 12.5915080527vw;
  }
  .about__fig {
    margin-top: 6.3689604685vw;
    overflow: hidden;
    border-radius: 1.1713030747vw;
  }
}
@media screen and (max-width: 768px) {
  .about__wrap {
    padding: 17.0666666667vw 0 0;
  }
  .about__header {
    width: 25.0366032211vw;
    padding-bottom: 3.074670571vw;
  }
  .about__header img {
    width: 100%;
  }
  .about__main {
    position: relative;
    padding: 0 6.6666666667vw;
    margin-top: 19.4666666667vw;
  }
  .about__hgroup {
    text-align: center;
  }
  .about__en {
    font-size: 3.7333333333vw;
    line-height: 1em;
  }
  .about__ttl {
    margin-block: 8vw 8.5333333333vw;
  }
  .about__ttl img {
    width: 79.7333333333vw;
  }
  .about__txt {
    margin-top: 3.2vw;
    font-size: 4vw;
    line-height: 2em;
    text-align: center;
  }
  .about__txt + .about__txt {
    margin-top: 5.6vw;
  }
  .about__shapes {
    position: relative;
    top: 0 !important;
    width: 86.6666666667vw;
    height: 86.6666666667vw;
    margin: 10.4vw auto 0;
  }
  .about__fellow, .about__thing, .about__object {
    width: 53.3333333333vw;
    height: 53.3333333333vw;
  }
  .about__fellow-txt, .about__thing-txt, .about__object-txt {
    margin-top: 2.6666666667vw;
    font-size: 2.6666666667vw;
    line-height: 1.4em;
  }
  .about__fellow {
    top: 0;
    left: 16.5333333333vw;
  }
  .about__fellow-box {
    top: 10.6666666667vw;
    left: 50%;
    transform: translateX(-50%);
  }
  .about__fellow-img {
    width: 21.8666666667vw;
  }
  .about__thing {
    bottom: 0;
    left: 0;
  }
  .about__thing-box {
    bottom: 10.6666666667vw;
    left: 10.6666666667vw;
  }
  .about__thing-img {
    width: 18.4vw;
  }
  .about__object {
    right: 0;
    bottom: 0;
  }
  .about__object-box {
    right: 10.6666666667vw;
    bottom: 10.6666666667vw;
  }
  .about__object-img {
    width: 18.4vw;
  }
  .about__logo {
    width: 28.5333333333vw;
  }
  .about__fig {
    margin-top: 17.0666666667vw;
  }
}

/* /cafe/about/_about-steps.scss
-------------------------------------------------- */
.about-steps {
  background-color: #FAF4E7;
}
.about-steps__ttl {
  font-weight: 700;
  padding: 0;
  margin: 0;
  letter-spacing: 0;
}
.about-steps__lead {
  font-weight: 600;
}
.about-steps__container {
  overflow: auto;
}
.about-steps__list {
  display: flex;
}
.about-steps__period {
  display: flex;
  align-items: center;
}
.about-steps__period::after {
  content: "";
  flex: 1;
  background-color: #022729;
}
.about-steps__year {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #0CA4BF;
  border-radius: 50%;
}
.about-steps__year span {
  display: inline-block;
  color: #fff;
  font-weight: 600;
}
.about-steps__year span em {
  font-weight: 500;
  font-style: normal;
  font-family: "Satoshi", sans-serif;
}
.about-steps__link, .about-steps__box {
  position: relative;
}
.about-steps__link[target=_blank] .about-steps__arrow::after, .about-steps__box[target=_blank] .about-steps__arrow::after {
  mask: url(../../img/common/blank.svg) center center no-repeat;
  mask-size: contain;
}
.about-steps__fig {
  width: 100%;
  overflow: hidden;
  border: solid #fff;
}
.about-steps__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-steps__txt {
  color: #022729;
  font-weight: 500;
}
.about-steps__arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: #022729;
  border-radius: 50%;
}
.about-steps__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mask: url(../../img/common/arrow.svg) center center no-repeat;
  mask-size: contain;
  background-color: #fff;
}
@media screen and (min-width: 769px), print {
  .about-steps {
    width: 100%;
    overflow: hidden;
  }
  .about-steps__wrap {
    padding: 6.7349926794vw 4.6852122987vw 7.3206442167vw;
  }
  .about-steps__ttl {
    font-size: 2.0497803807vw;
    line-height: 1.2142857143em;
  }
  .about-steps__lead {
    margin-top: 1.8301610542vw;
    font-size: 1.1713030747vw;
    line-height: 1.875em;
  }
  .about-steps__container {
    margin-inline: -4.6852122987vw;
    padding-bottom: 1.4641288433vw;
  }
  .about-steps__list {
    margin-top: 2.9282576867vw;
    padding-inline: 4.6852122987vw;
    width: 219.6193265007vw;
  }
  .about-steps__item {
    width: 21.9619326501vw;
  }
  .about-steps__item:nth-child(odd) .about-steps__link, .about-steps__item:nth-child(odd) .about-steps__box {
    margin-top: 4.39238653vw;
  }
  .about-steps__item:nth-child(odd) .about-steps__link::before, .about-steps__item:nth-child(odd) .about-steps__box::before {
    content: "";
    position: absolute;
    top: -3.8067349927vw;
    left: 2.635431918vw;
    width: 1px;
    height: 3.8067349927vw;
    border-right: 1px dashed #022729;
  }
  .about-steps__item:nth-child(even) .about-steps__link, .about-steps__item:nth-child(even) .about-steps__box {
    margin-top: 8.78477306vw;
  }
  .about-steps__item:nth-child(even) .about-steps__link::before, .about-steps__item:nth-child(even) .about-steps__box::before {
    content: "";
    position: absolute;
    top: -8.1991215227vw;
    left: 2.635431918vw;
    width: 1px;
    height: 8.1991215227vw;
    border-right: 1px dashed #022729;
  }
  .about-steps__period {
    height: 5.270863836vw;
  }
  .about-steps__period::after {
    margin: 0 1.1713030747vw;
    height: 0.1464128843vw;
  }
  .about-steps__period:not(:has(.about-steps__year))::after {
    margin: 0 1.1713030747vw 0 -1.1713030747vw;
  }
  .about-steps__period:not(:has(.about-steps__year)) + .about-steps__link::before {
    top: -10.8345534407vw;
    height: 10.8345534407vw;
  }
  .about-steps__year {
    width: 5.270863836vw;
    height: 5.270863836vw;
  }
  .about-steps__year span {
    font-size: 1.0248901903vw;
    line-height: 1.4285714286em;
  }
  .about-steps__year span + span {
    position: relative;
    margin-top: 0.3660322108vw;
  }
  .about-steps__year span + span::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -0.439238653vw;
    transform: translateX(-50%);
    width: 1px;
    height: 0.5856515373vw;
    background-color: #fff;
  }
  .about-steps__link {
    display: block;
    padding-bottom: 2.0497803807vw;
    width: 19.0336749634vw;
  }
  .about-steps__link[target=_blank] .about-steps__arrow::after {
    height: 0.7320644217vw;
  }
  .about-steps__link:hover .about-steps__img {
    transform: scale(1.08);
  }
  .about-steps__link:hover .about-steps__arrow {
    background-color: #fff;
  }
  .about-steps__link:hover .about-steps__arrow::after {
    background-color: #022729;
  }
  .about-steps__box {
    display: block;
    padding-bottom: 2.0497803807vw;
    width: 19.0336749634vw;
  }
  .about-steps__fig {
    border-width: 0.3660322108vw;
    border-radius: 0.439238653vw;
  }
  .about-steps__img {
    transition: transform 0.3s ease-out;
  }
  .about-steps__txt {
    margin-top: 1.0980966325vw;
    font-size: 1.0248901903vw;
    line-height: 1.4285714286em;
  }
  .about-steps__arrow {
    width: 1.756954612vw;
    height: 1.756954612vw;
    border: 2px solid #022729;
    transition: background-color 0.3s ease-out;
  }
  .about-steps__arrow::after {
    width: 0.7320644217vw;
    height: 0.6588579795vw;
    transition: background-color 0.3s ease-out;
  }
}
@media screen and (max-width: 768px) {
  .about-steps__wrap {
    padding: 19.2vw 6.6666666667vw 21.3333333333vw;
  }
  .about-steps__ttl {
    font-size: 6.4vw;
    line-height: 1.3333333333em;
  }
  .about-steps__lead {
    margin-top: 5.3333333333vw;
    font-size: 3.7333333333vw;
    line-height: 1.5714285714em;
  }
  .about-steps__container {
    margin-inline: -6.6666666667vw;
    padding-bottom: 4.2666666667vw;
  }
  .about-steps__list {
    margin-top: 9.3333333333vw;
    padding-inline: 6.6666666667vw;
    width: 800vw;
  }
  .about-steps__item {
    width: 80vw;
  }
  .about-steps__item:nth-child(odd) .about-steps__link, .about-steps__item:nth-child(odd) .about-steps__box {
    margin-top: 16vw;
  }
  .about-steps__item:nth-child(odd) .about-steps__link::before, .about-steps__item:nth-child(odd) .about-steps__box::before {
    content: "";
    position: absolute;
    top: -13.8666666667vw;
    left: 9.6vw;
    width: 1px;
    height: 13.8666666667vw;
    border-right: 1px dashed #022729;
  }
  .about-steps__item:nth-child(even) .about-steps__link, .about-steps__item:nth-child(even) .about-steps__box {
    margin-top: 32vw;
  }
  .about-steps__item:nth-child(even) .about-steps__link::before, .about-steps__item:nth-child(even) .about-steps__box::before {
    content: "";
    position: absolute;
    top: -29.8666666667vw;
    left: 9.6vw;
    width: 1px;
    height: 29.8666666667vw;
    border-right: 1px dashed #022729;
  }
  .about-steps__period {
    height: 19.2vw;
  }
  .about-steps__period::after {
    margin: 0 4.2666666667vw;
    height: 0.5333333333vw;
  }
  .about-steps__period:not(:has(.about-steps__year))::after {
    margin: 0 4.2666666667vw 0 -4.2666666667vw;
  }
  .about-steps__period:not(:has(.about-steps__year)) + .about-steps__link::before {
    top: -39.4666666667vw;
    height: 39.4666666667vw;
  }
  .about-steps__year {
    width: 19.2vw;
    height: 19.2vw;
  }
  .about-steps__year span {
    font-size: 3.7333333333vw;
    line-height: 1.4285714286em;
  }
  .about-steps__year span + span {
    position: relative;
    margin-top: 1.3333333333vw;
  }
  .about-steps__year span + span::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -1.6vw;
    transform: translateX(-50%);
    width: 1px;
    height: 2.1333333333vw;
    background-color: #fff;
  }
  .about-steps__link {
    display: block;
    padding-bottom: 7.4666666667vw;
    width: 69.3333333333vw;
  }
  .about-steps__link[target=_blank] .about-steps__arrow::after {
    height: 2.6666666667vw;
  }
  .about-steps__box {
    display: block;
    padding-bottom: 7.4666666667vw;
    width: 69.3333333333vw;
  }
  .about-steps__fig {
    border-width: 1.3333333333vw;
    border-radius: 1.6vw;
  }
  .about-steps__txt {
    margin-top: 4vw;
    font-size: 3.7333333333vw;
    line-height: 1.4285714286em;
  }
  .about-steps__arrow {
    width: 6.4vw;
    height: 6.4vw;
    border: 2px solid #022729;
  }
  .about-steps__arrow::after {
    width: 2.6666666667vw;
    height: 2.4vw;
  }
}

/* /cafe/about/_about-sustainable.scss
-------------------------------------------------- */
.about-sustainable {
  background-color: #fff;
}
.about-sustainable__ttl {
  text-align: center;
  font-weight: 700;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
}
.about-sustainable__lead {
  text-align: center;
  font-weight: 600;
}
.about-sustainable__lead a {
  color: #022729;
  text-decoration: underline;
}
.about-sustainable__lead a::after {
  content: "";
  display: inline-block;
  mask: url(../../img/common/blank.svg) center center no-repeat;
  mask-size: contain;
  background-color: #022729;
}
.about-sustainable__content {
  position: relative;
}
.about-sustainable__fig {
  width: 100%;
}
.about-sustainable__img {
  width: 100%;
}
.about-sustainable__others-ttl {
  text-align: center;
  font-weight: 700;
}
.about-sustainable__others-list {
  display: flex;
}
.about-sustainable__other {
  width: fit-content;
  background-color: #E2F5F2;
  border: 1px solid #CCE0DE;
  border-radius: 999px;
}
.about-sustainable__other-link {
  color: #022729;
  font-weight: 500;
}
.about-sustainable__speech {
  position: absolute;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s linear;
}
.about-sustainable__speech:hover {
  opacity: 1;
  pointer-events: inherit;
}
.about-sustainable__speech:hover .about-sustainable__speech-link span {
  opacity: 0.5;
}
.about-sustainable__speech-link {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: #457366;
  font-weight: 600;
}
.about-sustainable__speech-link span {
  position: relative;
  z-index: 1;
  transition: opacity 0.2s linear;
}
@media screen and (min-width: 769px), print {
  .about-sustainable__wrap {
    padding: 6.7349926794vw 4.6852122987vw 7.3206442167vw;
  }
  .about-sustainable__ttl {
    font-size: 2.0497803807vw;
    line-height: 1.2142857143em;
  }
  .about-sustainable__lead {
    margin-top: 1.9033674963vw;
    font-size: 1.1713030747vw;
    line-height: 1.875em;
  }
  .about-sustainable__lead a::after {
    margin-right: 0.3660322108vw;
    margin-left: 0.7320644217vw;
    width: 1.0248901903vw;
    height: 1.0248901903vw;
  }
  .about-sustainable__lead a:hover {
    text-decoration: none;
  }
  .about-sustainable__scroll area {
    cursor: pointer;
  }
  .about-sustainable__content map:has(area:nth-of-type(1):hover) + .about-sustainable__speech:nth-of-type(1) {
    opacity: 1;
    pointer-events: inherit;
  }
  .about-sustainable__content map:has(area:nth-of-type(2):hover) ~ .about-sustainable__speech:nth-of-type(2) {
    opacity: 1;
    pointer-events: inherit;
  }
  .about-sustainable__content map:has(area:nth-of-type(3):hover) ~ .about-sustainable__speech:nth-of-type(3) {
    opacity: 1;
    pointer-events: inherit;
  }
  .about-sustainable__content map:has(area:nth-of-type(4):hover) ~ .about-sustainable__speech:nth-of-type(4) {
    opacity: 1;
    pointer-events: inherit;
  }
  .about-sustainable__content map:has(area:nth-of-type(5):hover) ~ .about-sustainable__speech:nth-of-type(5) {
    opacity: 1;
    pointer-events: inherit;
  }
  .about-sustainable__content map:has(area:nth-of-type(6):hover) ~ .about-sustainable__speech:nth-of-type(6) {
    opacity: 1;
    pointer-events: inherit;
  }
  .about-sustainable__content map:has(area:nth-of-type(7):hover) ~ .about-sustainable__speech:nth-of-type(7) {
    opacity: 1;
    pointer-events: inherit;
  }
  .about-sustainable__content map:has(area:nth-of-type(8):hover) ~ .about-sustainable__speech:nth-of-type(8) {
    opacity: 1;
    pointer-events: inherit;
  }
  .about-sustainable__fig {
    margin-top: 2.9282576867vw;
    border-radius: 0.3660322108vw;
    overflow: hidden;
  }
  .about-sustainable__fig::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/sustainable_bg.png) center center no-repeat;
    background-size: cover;
    object-fit: cover;
    border-radius: 0.3660322108vw;
  }
  .about-sustainable__img {
    position: relative;
    z-index: 1;
  }
  .about-sustainable__others {
    margin-top: 3.074670571vw;
  }
  .about-sustainable__others-ttl {
    font-size: 1.317715959vw;
    line-height: 1.3333333333em;
  }
  .about-sustainable__others-list {
    justify-content: center;
    margin-top: 1.3909224012vw;
    gap: 0 0.878477306vw;
  }
  .about-sustainable__other {
    transition: background-color 0.2s linear, border 0.2s linear;
  }
  .about-sustainable__other-link {
    padding: 0.2928257687vw 0.8052708638vw 0.3660322108vw;
    font-size: 0.878477306vw;
    line-height: 1.5em;
    transition: color 0.2s linear;
  }
  .about-sustainable__other:hover {
    border: 1px solid #022729;
    background-color: #022729;
  }
  .about-sustainable__other:hover .about-sustainable__other-link {
    color: #fff;
  }
  .about-sustainable__speech {
    position: absolute;
    z-index: 2;
  }
  .about-sustainable__speech-link {
    color: #457366;
    font-size: 0.9516837482vw;
    line-height: 1.3846153846em;
  }
  .about-sustainable__speech-link span::after {
    content: "";
    display: inline-block;
    margin-left: 0.7320644217vw;
    width: 0.878477306vw;
    height: 0.878477306vw;
    top: 0.2196193265vw;
    mask: url(../img/blank.svg) center center no-repeat;
    mask-size: contain;
    background-color: #457366;
  }
  .about-sustainable__speech:nth-of-type(1) {
    top: 5.1244509517vw;
    left: 32.6500732064vw;
    padding-left: 0.2928257687vw;
    width: 24.0117130307vw;
    height: 3.8799414348vw;
  }
  .about-sustainable__speech:nth-of-type(1) .about-sustainable__speech-link {
    padding-top: 0.878477306vw;
    padding-left: 2.3426061493vw;
  }
  .about-sustainable__speech:nth-of-type(1) .about-sustainable__speech-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/sustainable_speech01.png) center center no-repeat;
    background-size: contain;
  }
  .about-sustainable__speech:nth-of-type(2) {
    top: 5.1976573939vw;
    left: 29.2825768668vw;
    width: 21.5226939971vw;
    height: 4.6852122987vw;
  }
  .about-sustainable__speech:nth-of-type(2) .about-sustainable__speech-link {
    padding-top: 0.878477306vw;
    padding-left: 1.4641288433vw;
  }
  .about-sustainable__speech:nth-of-type(2) .about-sustainable__speech-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/sustainable_speech02.png) center center no-repeat;
    background-size: contain;
  }
  .about-sustainable__speech:nth-of-type(3) {
    top: 8.5651537335vw;
    left: 40.2635431918vw;
    width: 24.3045387994vw;
    height: 4.6852122987vw;
  }
  .about-sustainable__speech:nth-of-type(3) .about-sustainable__speech-link {
    padding-top: 0.878477306vw;
    padding-left: 1.4641288433vw;
  }
  .about-sustainable__speech:nth-of-type(3) .about-sustainable__speech-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/sustainable_speech03.png) center center no-repeat;
    background-size: contain;
  }
  .about-sustainable__speech:nth-of-type(4) {
    top: 13.3967789165vw;
    left: 51.6105417277vw;
    width: 26.2079062958vw;
    height: 4.6852122987vw;
  }
  .about-sustainable__speech:nth-of-type(4) .about-sustainable__speech-link {
    padding-top: 0.878477306vw;
    padding-left: 1.4641288433vw;
  }
  .about-sustainable__speech:nth-of-type(4) .about-sustainable__speech-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/sustainable_speech04.png) center center no-repeat;
    background-size: contain;
  }
  .about-sustainable__speech:nth-of-type(5) {
    top: 22.9868228404vw;
    left: 38.2869692533vw;
    width: 32.6500732064vw;
    height: 3.953147877vw;
  }
  .about-sustainable__speech:nth-of-type(5) .about-sustainable__speech-link {
    padding-top: 0.878477306vw;
    padding-left: 1.4641288433vw;
  }
  .about-sustainable__speech:nth-of-type(5) .about-sustainable__speech-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/sustainable_speech05.png) center center no-repeat;
    background-size: contain;
  }
  .about-sustainable__speech:nth-of-type(6) {
    top: 22.8404099561vw;
    left: 31.6251830161vw;
    width: 28.9897510981vw;
    height: 4.6852122987vw;
  }
  .about-sustainable__speech:nth-of-type(6) .about-sustainable__speech-link {
    padding-top: 0.878477306vw;
    padding-left: 1.4641288433vw;
  }
  .about-sustainable__speech:nth-of-type(6) .about-sustainable__speech-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/sustainable_speech06.png) center center no-repeat;
    background-size: contain;
  }
  .about-sustainable__speech:nth-of-type(7) {
    top: 26.1346998536vw;
    left: 25.9882869693vw;
    width: 40.1171303075vw;
    height: 4.6852122987vw;
  }
  .about-sustainable__speech:nth-of-type(7) .about-sustainable__speech-link {
    padding-top: 0.878477306vw;
    padding-left: 1.4641288433vw;
  }
  .about-sustainable__speech:nth-of-type(7) .about-sustainable__speech-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/sustainable_speech07.png) center center no-repeat;
    background-size: contain;
  }
  .about-sustainable__speech:nth-of-type(8) {
    top: 29.5021961933vw;
    left: 32.8696925329vw;
    width: 26.2079062958vw;
    height: 4.6852122987vw;
  }
  .about-sustainable__speech:nth-of-type(8) .about-sustainable__speech-link {
    padding-top: 0.878477306vw;
    padding-left: 1.4641288433vw;
  }
  .about-sustainable__speech:nth-of-type(8) .about-sustainable__speech-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/sustainable_speech08.png) center center no-repeat;
    background-size: contain;
  }
}
@media screen and (max-width: 768px) {
  .about-sustainable__wrap {
    padding: 19.2vw 6.6666666667vw 21.3333333333vw;
  }
  .about-sustainable__ttl {
    font-size: 6.4vw;
    line-height: 1.3333333333em;
  }
  .about-sustainable__lead {
    margin-top: 5.0666666667vw;
    font-size: 3.7333333333vw;
    line-height: 1.5714285714em;
  }
  .about-sustainable__lead a::after {
    margin-right: 0.5333333333vw;
    margin-left: 0.5333333333vw;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
  }
  .about-sustainable__scroll {
    width: 100%;
    overflow-x: scroll;
  }
  .about-sustainable__content {
    width: 232vw;
  }
  .about-sustainable__content map:has(area:nth-of-type(1).is-active) + .about-sustainable__speech:nth-of-type(1) {
    opacity: 1;
    pointer-events: inherit;
  }
  .about-sustainable__content map:has(area:nth-of-type(2).is-active) ~ .about-sustainable__speech:nth-of-type(2) {
    opacity: 1;
    pointer-events: inherit;
  }
  .about-sustainable__content map:has(area:nth-of-type(3).is-active) ~ .about-sustainable__speech:nth-of-type(3) {
    opacity: 1;
    pointer-events: inherit;
  }
  .about-sustainable__content map:has(area:nth-of-type(4).is-active) ~ .about-sustainable__speech:nth-of-type(4) {
    opacity: 1;
    pointer-events: inherit;
  }
  .about-sustainable__content map:has(area:nth-of-type(5).is-active) ~ .about-sustainable__speech:nth-of-type(5) {
    opacity: 1;
    pointer-events: inherit;
  }
  .about-sustainable__content map:has(area:nth-of-type(6).is-active) ~ .about-sustainable__speech:nth-of-type(6) {
    opacity: 1;
    pointer-events: inherit;
  }
  .about-sustainable__content map:has(area:nth-of-type(7).is-active) ~ .about-sustainable__speech:nth-of-type(7) {
    opacity: 1;
    pointer-events: inherit;
  }
  .about-sustainable__content map:has(area:nth-of-type(8).is-active) ~ .about-sustainable__speech:nth-of-type(8) {
    opacity: 1;
    pointer-events: inherit;
  }
  .about-sustainable__fig {
    margin-top: 9.0666666667vw;
    width: 232vw;
    border-radius: 1.0666666667vw;
    overflow: hidden;
  }
  .about-sustainable__fig::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/sustainable_bg.png) center center no-repeat;
    background-size: cover;
    object-fit: cover;
    border-radius: 1.0666666667vw;
  }
  .about-sustainable__img {
    position: relative;
    z-index: 1;
  }
  .about-sustainable__others {
    margin-top: 12.8vw;
  }
  .about-sustainable__others-ttl {
    font-size: 4.8vw;
  }
  .about-sustainable__others-list {
    flex-wrap: wrap;
    margin-top: 6.4vw;
    margin-inline: auto;
    width: 77.8666666667vw;
    gap: 2.6666666667vw 3.2vw;
  }
  .about-sustainable__other-link {
    padding: 1.0666666667vw 3.2vw 1.6vw;
    font-size: 2.6666666667vw;
  }
  .about-sustainable__speech {
    position: absolute;
    z-index: 2;
  }
  .about-sustainable__speech-link {
    color: #457366;
    font-size: 2.6666666667vw;
    line-height: 1.3846153846em;
  }
  .about-sustainable__speech-link span::after {
    content: "";
    display: inline-block;
    margin-left: 1.8666666667vw;
    width: 2.4vw;
    height: 2.4vw;
    top: 0.8vw;
    mask: url(../img/blank.svg) center center no-repeat;
    mask-size: contain;
    background-color: #457366;
  }
  .about-sustainable__speech:nth-of-type(1) {
    top: 14.1333333333vw;
    left: 90.6666666667vw;
    padding-left: 1.0666666667vw;
    width: 66.6666666667vw;
    height: 10.6666666667vw;
  }
  .about-sustainable__speech:nth-of-type(1) .about-sustainable__speech-link {
    padding-top: 2.4vw;
    padding-left: 6.4vw;
  }
  .about-sustainable__speech:nth-of-type(1) .about-sustainable__speech-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/sustainable_speech01.png) center center no-repeat;
    background-size: contain;
  }
  .about-sustainable__speech:nth-of-type(2) {
    top: 14.4vw;
    left: 82.9333333333vw;
    width: 59.7333333333vw;
    height: 13.0666666667vw;
  }
  .about-sustainable__speech:nth-of-type(2) .about-sustainable__speech-link {
    padding-top: 2.4vw;
    padding-left: 4vw;
  }
  .about-sustainable__speech:nth-of-type(2) .about-sustainable__speech-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/sustainable_speech02.png) center center no-repeat;
    background-size: contain;
  }
  .about-sustainable__speech:nth-of-type(3) {
    top: 23.7333333333vw;
    left: 113.3333333333vw;
    width: 67.4666666667vw;
    height: 13.0666666667vw;
  }
  .about-sustainable__speech:nth-of-type(3) .about-sustainable__speech-link {
    padding-top: 2.4vw;
    padding-left: 4vw;
  }
  .about-sustainable__speech:nth-of-type(3) .about-sustainable__speech-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/sustainable_speech03.png) center center no-repeat;
    background-size: contain;
  }
  .about-sustainable__speech:nth-of-type(4) {
    top: 37.3333333333vw;
    left: 145.0666666667vw;
    width: 72.8vw;
    height: 13.0666666667vw;
  }
  .about-sustainable__speech:nth-of-type(4) .about-sustainable__speech-link {
    padding-top: 2.4vw;
    padding-left: 4vw;
  }
  .about-sustainable__speech:nth-of-type(4) .about-sustainable__speech-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/sustainable_speech04.png) center center no-repeat;
    background-size: contain;
  }
  .about-sustainable__speech:nth-of-type(5) {
    top: 64.5333333333vw;
    left: 108.8vw;
    width: 90.6666666667vw;
    height: 10.9333333333vw;
  }
  .about-sustainable__speech:nth-of-type(5) .about-sustainable__speech-link {
    padding-top: 2.4vw;
    padding-left: 4vw;
  }
  .about-sustainable__speech:nth-of-type(5) .about-sustainable__speech-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/sustainable_speech05.png) center center no-repeat;
    background-size: contain;
  }
  .about-sustainable__speech:nth-of-type(6) {
    top: 64.5333333333vw;
    left: 90.1333333333vw;
    width: 80.5333333333vw;
    height: 13.0666666667vw;
  }
  .about-sustainable__speech:nth-of-type(6) .about-sustainable__speech-link {
    padding-top: 2.4vw;
    padding-left: 4vw;
  }
  .about-sustainable__speech:nth-of-type(6) .about-sustainable__speech-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/sustainable_speech06.png) center center no-repeat;
    background-size: contain;
  }
  .about-sustainable__speech:nth-of-type(7) {
    top: 73.6vw;
    left: 74.4vw;
    width: 111.4666666667vw;
    height: 13.0666666667vw;
  }
  .about-sustainable__speech:nth-of-type(7) .about-sustainable__speech-link {
    padding-top: 2.4vw;
    padding-left: 4vw;
  }
  .about-sustainable__speech:nth-of-type(7) .about-sustainable__speech-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/sustainable_speech07.png) center center no-repeat;
    background-size: contain;
  }
  .about-sustainable__speech:nth-of-type(8) {
    top: 82.9333333333vw;
    left: 93.6vw;
    width: 72.8vw;
    height: 13.0666666667vw;
  }
  .about-sustainable__speech:nth-of-type(8) .about-sustainable__speech-link {
    padding-top: 2.4vw;
    padding-left: 4vw;
  }
  .about-sustainable__speech:nth-of-type(8) .about-sustainable__speech-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/sustainable_speech08.png) center center no-repeat;
    background-size: contain;
  }
}

/* /cafe/about/_about-bottom.scss
-------------------------------------------------- */
.about-bottom {
  background-color: #E2F5F2;
}
@media screen and (min-width: 769px), print {
  .about-bottom__wrap {
    padding: 7.3206442167vw 4.6852122987vw;
  }
}
@media screen and (max-width: 768px) {
  .about-bottom__wrap {
    padding: 25.6vw 6.6666666667vw 21.3333333333vw;
  }
}

/* /cafe/about/_about-baton.scss
-------------------------------------------------- */
.about-baton {
  background-color: #fff;
}
.about-baton__img {
  width: 100%;
}
.about-baton__ttl {
  margin: 0;
  padding: 0;
  letter-spacing: 0;
  font-weight: 700;
}
.about-baton__txt {
  font-weight: 500;
}
@media screen and (min-width: 769px), print {
  .about-baton {
    padding: 2.9282576867vw 3.074670571vw 3.8799414348vw 7.027818448vw;
    border-radius: 1.1713030747vw;
    display: flex;
    align-items: center;
    gap: 0 7.027818448vw;
  }
  .about-baton__fig {
    width: 16.6910688141vw;
  }
  .about-baton__box {
    flex: 1;
  }
  .about-baton__ttl {
    padding-bottom: 1.8301610542vw;
    font-size: 1.756954612vw;
    line-height: 1.3333333333em;
    border-bottom: 1px dashed #022729;
  }
  .about-baton__txt {
    margin-top: 1.8301610542vw;
    font-size: 1.0980966325vw;
    line-height: 1.4666666667em;
  }
}
@media screen and (max-width: 768px) {
  .about-baton {
    padding: 10.9333333333vw 5.3333333333vw 7.4666666667vw;
    border-radius: 3.2vw;
  }
  .about-baton__fig {
    width: 56vw;
    margin: 0 auto;
  }
  .about-baton__box {
    margin-top: 6.6666666667vw;
  }
  .about-baton__ttl {
    text-align: center;
    padding-bottom: 7.4666666667vw;
    font-size: 4.8vw;
    line-height: 1.3333333333em;
    border-bottom: 1px dashed #022729;
  }
  .about-baton__txt {
    margin-top: 5.0666666667vw;
    font-size: 3.7333333333vw;
    line-height: 1.4285714286em;
  }
}

/* /cafe/about/_about-contact.scss
-------------------------------------------------- */
.about-contact {
  background-color: #fff;
}
.about-contact__ttl {
  text-align: center;
  font-weight: 700;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
}
.about-contact__box {
  background: url(../../img/common/main_bg.jpg) center center no-repeat;
  background-size: cover;
}
.about-contact__lead {
  text-align: center;
  font-weight: 600;
}
.about-contact__btn i::after {
  mask-image: url(../../img/common/arrow.svg);
}
@media screen and (min-width: 769px), print {
  .about-contact {
    margin-top: 1.756954612vw;
    padding: 5.270863836vw 4.6852122987vw 5.8565153734vw;
    border-radius: 1.1713030747vw;
  }
  .about-contact__ttl {
    font-size: 2.0497803807vw;
    line-height: 1.2142857143em;
  }
  .about-contact__boxes {
    margin-top: 2.5622254758vw;
    display: flex;
    gap: 0 2.3426061493vw;
  }
  .about-contact__box {
    flex: 1;
    padding: 3.5871156662vw 6.588579795vw 4.0995607613vw;
    border-radius: 1.1713030747vw;
  }
  .about-contact__lead {
    font-size: 1.1713030747vw;
    line-height: 1.5em;
  }
  .about-contact__btn {
    margin-top: 1.9765739385vw;
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .about-contact {
    margin-top: 6.4vw;
    padding: 8.5333333333vw 5.3333333333vw 12vw;
    border-radius: 3.2vw;
  }
  .about-contact__ttl {
    font-size: 6.4vw;
    line-height: 1.3333333333em;
  }
  .about-contact__boxes {
    margin-top: 5.6vw;
  }
  .about-contact__box {
    flex: 1;
    padding: 5.0666666667vw 5.8666666667vw 6.4vw;
    border-radius: 2.6666666667vw;
  }
  .about-contact__box + .about-contact__box {
    margin-top: 3.7333333333vw;
  }
  .about-contact__lead {
    font-size: 3.4666666667vw;
    line-height: 1.3846153846em;
  }
  .about-contact__btn {
    margin-top: 3.4666666667vw;
    width: 100%;
  }
}

/* /cafe/about/_about-scroll.scss
-------------------------------------------------- */
.about-scroll {
  position: relative;
}
.about-scroll::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  margin-left: var(--left);
  aspect-ratio: 1/1;
  background: url("../img/scrollhint.png") no-repeat center center/contain;
  transition: opacity 0.2s linear;
  z-index: 99;
  pointer-events: none;
}
.about-scroll.is-scroll::after {
  opacity: 0;
}
@media screen and (min-width: 769px), print {
  .about-scroll::after {
    width: 6.4421669107vw;
  }
  .about-scroll--sp::after {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .about-scroll::after {
    width: 23.4666666667vw;
  }
}