@charset "utf-8";

.container {
  padding: 0;
  margin: 0;
}


/* ローディングアニメーションチラつき防止 */

/* ==========================
header--sp
============================= */
.pc__header {
  display: none;
}

.sp__header {
  display: block;
  position: fixed;
  z-index: 99999;
  top: 0;
  margin-top: 2.4vw;
}

.sp__header__inner {
  position: fixed;
  height: auto;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.sp__header__logo__wrap {
  width: 11.5vw;
  margin-left: 2vw;
  z-index: 99999;
}

.sp__header__logo__wrap img {
  width: 100%;
}

/* .sp__header__logo a {
  scroll-behavior: smooth;
}
 */
.hamburgerBtn {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
  position: relative;
  top: 0;
  left: 0;
  width: 10vw;
  height: 47px;
  color: #ffffff;
  z-index: 99999;
  margin-right: 4.47%;
}

.hamburgerBtn i {
  position: absolute;
  left: 3.47%;
  width: 8vw;
  height: .4vw;
  background-color: #FFFFFF;
  transition: transform 0.6s cubic-bezier(0.87, 0, 0.13, 1);
  transition: .2s ease-out;
  /* アニメーション */
}

.hamburgerBtn.active i {
  background-color: var(--primary-black, #2f2f27);
}

.hamburgerBtn i:nth-of-type(1) {
  top: 4px;
}

.hamburgerBtn i:nth-of-type(2) {
  top: 9px;
}

/* ホバー */
/* .hamburgerBtn:hover i:nth-of-type(1) {
  margin-top: 2px;

}

.hamburgerBtn:hover i:nth-of-type(2) {
  margin-top: -2px;
} */

/* アクティブの時はホバーしない */
/* .hamburgerBtn.active:hover i:nth-of-type(1) {
  margin-top: 0;
}

.hamburgerBtn.active:hover i:nth-of-type(2) {
  margin-top: 0;
}
 */
/* バッテンにする */
.hamburgerBtn.active i:nth-of-type(1) {
  transform: translateY(4px) rotate(10deg);
}

.hamburgerBtn.active i:nth-of-type(2) {
  transform: translateY(-1px) rotate(-9deg);
  /* -45度回転 */
}

/* インフォループ */
.sp__header__info__loop--wrap {
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 52vw;
  white-space: nowrap;
  color: #FFFFFF;
}

.sp__header__info__loop--area {
  display: flex;
  animation: loop-slide02 60s infinite linear 1s both;
  list-style: none;
  margin: 0;
  padding: 0;
  color: #FFFFFF;
}

@keyframes loop-slide02 {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.sp__header__info__loop--area .content {
  color: #FFFFFF;
  font-size: 2.6vw;
}

.sp__header__info__loop--area .content a {
  text-decoration: none;
  color: #FFFFFF;
  font-size: 2.6vw;
}


/* グロナビ */
.sp__nav {
  margin-top: -2.4vw;
  position: fixed;
  padding: var(--contentPadding5);
  width: 100vw;
  height: 100vh;
  top: 0;
  right: 0;
  background-color: var(--primary-green, #1CFF69);
  background-size: 100% 100%;
  transform: translateX(100%);

  /* gsapで開閉を制御しているので、CSSでは記述を消す */
  /*   opacity: 0; */
  /*    visibility: hidden;  */
  /* transition: transform 0.3s ease-in-out; */
}

/*  .sp__nav.active {
 transform: translateX(0); */
/* opacity: 1; */
/*   visibility: visible; 
}
*/

/* インフォループ-03 */
.sp__header__info__loop--wrap--03 {
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 52vw;
  white-space: nowrap;
  color: #2f2f27;
  margin: 2.2vw auto 0 32vw;
}

.sp__header__info__loop--area--03 {
  display: flex;
  animation: loop-slide02 60s infinite linear 1s both;
  list-style: none;
  margin: 0;
  padding: 0;
  color: #2f2f27;
}

@keyframes loop-slide02 {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.sp__header__info__loop--area--03 .content {
  color: #2f2f27;
  font-size: 2.6vw;
}

.sp__header__info__loop--area--03 .content a {
  color: #2f2f27;
  font-size: 2.6vw;
  text-decoration: none;
}


.sp__nav__list__wrap {
  margin-top: 40vh;
  margin-left: 10vw;
}

.sp__nav__list {
  font-size: 1.1vw;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: left;
}

.sp__nav__item {
  margin-bottom: -0.9rem;
}

/* カレント表示 */
.sp__nav ul li {
  position: relative;
  padding-left: 10px;
}

.sp__nav ul li a {
  text-decoration: none;
}

.current-indicator {
  position: absolute;
  left: -1vw;
  top: 50%;
  width: 4px;
  height: 4px;
  background-color: transparent;
  /* カレントでない時は透明 */
  border-radius: 50%;
  transform: translateY(-50%);
}

.current a {
  color: var(--primary-black, #2f2f27);
  /* カレントのリンクは白に */
}

/* メニューホバーアクション */
.sp__nav__item__txt {
  color: var(--primary-black, #2f2f27);
  margin-top: .7vw;
  margin-bottom: 6.3vw;
  display: grid;
  font-size: 5vw;
  line-height: 1.2;
  letter-spacing: 0.03em;
  /* ↓ホバーアニメ用 */
  overflow: hidden;
  color: transparent;
  text-shadow: 0 -1.5em 0 var(--primary-black, #2f2f27), 0 0 0 var(--primary-black, #2f2f27);
  transition: text-shadow 0.3s;

  opacity: 0;
  visibility: hidden;
}

/* 初期状態をCSSで非表示に設定 */
.nav__animation {
  opacity: 0;
  visibility: hidden;
}

.sp__nav__item__txt:hover {
  text-shadow: 0 0 0 var(--primary-black, #2f2f27), 0 1.5em 0 var(--primary-black, #2f2f27);
}


/* メニューホバーアクション終 */

/* SNS */
.sp__nav__sns__wrap {
  width: 31vw;
  display: flex;
  flex-direction: column;
  margin: 11.3vw 5vw auto 9vw;
}

.sp__nav__sns__item,
.sp__nav__sns__item__img {
  margin-top: 1vw;
  font-family: "darker-grotesque", sans-serif;
  font-size: 5vw;
  line-height: 1;
  letter-spacing: 0.04em;
  overflow: hidden;
  color: transparent;
  text-shadow: 0 -1.5em 0 var(--primary-black, #2f2f27), 0 0 0 var(--primary-black, #2f2f27);
  transition: text-shadow 0.3s;
}

.sp__nav__sns__item__img {
  margin-top: 0;
  margin-left: 0.5vw;
  width: 2.7vw;
  transform: rotate(-45deg);
  /* 初期状態で45度回転 */
  transition: transform 0.3s ease-in-out;
  /* 回転アニメーションのためのトランジション */
}

/* ホバー時のaタグのアニメーション */
.sp__nav__sns__item:hover {
  text-shadow: 0 0 0 var(--primary-black, #2f2f27), 0 1.5em 0 var(--primary-black, #2f2f27);
}

/* aタグがホバーされたときに画像も回転 */
.sp__nav__sns__item:hover .sp__nav__sns__item__img {
  transform: rotate(-45deg);
  /* 回転を元に戻す */
}


/* ==========================
header --PC
============================= */
@media screen and (min-width: 768px) {
  .sp__header {
    display: none;
  }

  .pc__header {
    display: block;
    position: fixed;
    z-index: 999;
    top: 0;
    margin-top: 0.5vw;
  }

  .pc__header {
    position: fixed;
    height: auto;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .header__logo__wrap {
    width: 3.5vw;
    margin: .5vw 1.5vw;
  }

  .header__logo__wrap img {
    width: 100%;
  }

  .hamburgerBtn {
    display: none;
  }

  /* インフォループ */
  .header__info__loop--wrap {
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 25vw;
    white-space: nowrap;
    color: #FFFFFF;
  }

  .header__info__loop--area {
    display: flex;
    animation: loop-slide02 60s infinite linear 1s both;
    list-style: none;
    margin: 0;
    padding: 0;
    color: #FFFFFF;
  }

  .header__info__loop--area .content {
    color: #FFFFFF;
    font-size: 0.75vw;
  }

  .header__info__loop--area .content a {
    color: #FFFFFF;
    font-size: 0.75vw;
    text-decoration: none;
  }

  @keyframes loop-slide02 {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-100%);
    }
  }

  /* MV内のグロナビ */
  .nav {
    width: 29vw;
    text-align: left;
    display: flex;
  }

  .nav__list__wrap {
    margin-right: 2vw;
  }

  .nav__item {
    margin-bottom: -0.9rem;
  }

  /* カレント表示 */
  .nav ul li {
    position: relative;
    padding-left: 1px;
  }

  .nav ul li a {
    text-decoration: none;
  }

  .current-indicator {
    position: absolute;
    left: -1vw;
    top: 50%;
    width: .35vw;
    height: .35vw;
    background-color: transparent;
    /* カレントでない時は透明 */
    border-radius: 50%;
    transform: translateY(-50%);
  }

  .current a {
    color: #FFFFFF;
    /* カレントのリンクは白に */
  }

  /* メニューホバーアクション */
  .nav__item__txt {
    margin-top: .7vw;
    margin-bottom: 1.3vw;
    display: grid;
    font-size: 0.7vw;
    line-height: 1;
    /* ↓ホバーアニメ用 */
    overflow: hidden;
    color: transparent;
    text-shadow: 0 -1.5em 0 #FFF, 0 0 0 #FFF;
    transition: text-shadow 0.3s;
  }

  .nav__item__txt:hover {
    text-shadow: 0 0 0 #FFF, 0 1.5em 0 #FFF;
  }

  /* メニューホバーアクション終 */
  /* mv内のSNS */
  .nav__sns__wrap {
    width: 16vw;
    display: flex;
    justify-content: space-between;
    margin-left: 5vw;
    margin-top: .3vw;
    margin-bottom: auto;
  }

  .nav__sns__item,
  .nav__sns__item__img {
    font-family: "darker-grotesque", sans-serif;
    font-size: 1vw;

    line-height: 1;
    overflow: hidden;
    color: transparent;
    text-shadow: 0 -1.5em 0 #FFF, 0 0 0 #FFF;
    transition: text-shadow 0.3s;
  }

  .nav__sns__item__img {
    margin-left: 0vw;
    width: 0.7vw;
    transform: rotate(-45deg);
    /* 初期状態で45度回転 */
    transition: transform 0.3s ease-in-out;
    /* 回転アニメーションのためのトランジション */
  }

  /* ホバー時のaタグのアニメーション */
  .nav__sns__item:hover {
    text-shadow: 0 0 0 #FFF, 0 1.5em 0 #FFF;
  }

  /* aタグがホバーされたときに画像も回転 */
  .nav__sns__item:hover .nav__sns__item__img {
    transform: rotate(-45deg);
    /* 回転を元に戻す */
  }
}

/* ==========================
mainVisual--SP
============================= */

.mainVisual__mv__wrap {
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.mainVisual__mv {
  position: relative;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 1;
  filter: brightness(70%);
}

@keyframes slideshow02 {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.mainVisual__mv img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  animation: slideshow02 10s linear infinite;
}

.mainVisual__mv img:nth-child(2) {
  animation-delay: 5s;
  /* 次の画像のフェードインを5秒後に開始 */
}

.mainVisual__read__wrap {
  width: 100%;
  position: absolute;
  top: 48vh;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: 30vw 36vw 33vw;
  align-items: center;
  z-index: 5;
}

.mainVisual__read__wrap .read__p--01 {
  text-align: right;
  font-size: 3vw;
  font-weight: 400;
  color: #ffffff;
  line-height: 2;
  letter-spacing: 0.16em;
}

.mainVisual__read__wrap .read__p--02 {
  text-align: left;
  font-size: 3vw;
  font-weight: 400;
  color: #ffffff;
  line-height: 2;
  letter-spacing: 0.16em;
  padding-left: 1.2vw;
}

.mainVisual__logo {
  margin: 0 auto;
  width: 33.2vw;
}


/* ==========================
mainVisual--pc
==========================
*/
@media screen and (min-width: 768px) {
  .mainVisual {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
  }

  .mainVisual__mv__wrap {
    position: relative;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
  }

  .mainVisual__mv {
    position: relative;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 1;
    filter: brightness(70%);
  }

  @keyframes slideshow {
    0% {
      opacity: 0;
    }

    20% {
      opacity: 1;
    }

    80% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  .mainVisual__read__wrap {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: 35vw 27vw 37vw;
    align-items: center;
    z-index: 5;
  }

  .mainVisual__mv img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: slideshow 10s linear infinite;
  }

  .mainVisual__mv img:nth-child(2) {
    animation-delay: 5s;
  }

  .mainVisual__read__wrap .read__p--01 {
    text-align: right;
    font-size: 1.1vw;
    font-weight: 400;
    color: #ffffff;
    line-height: 2;
    letter-spacing: 0.16em;
  }

  .mainVisual__read__wrap .read__p--02 {
    text-align: left;
    font-size: 1.1vw;
    font-weight: 400;
    color: #ffffff;
    line-height: 2;
    letter-spacing: 0.16em;
  }

  .mainVisual__logo {
    margin: 0 auto;
    width: 18.2vw;
  }
}

/* ==========================
about--sp
=========================== */
.about {
  margin-top: 13vh;
  height: 157vw;
  position: relative;
}

.about__area {
  position: relative;
}

.a__read {
  display: block;
  font-size: 6vw;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.1em;
  position: absolute;
  top: 2vw;
  left: 8vw;
  /* sinさんのコード */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.a__read02 {
  font-size: 6vw;
  font-weight: 500;
  letter-spacing: 0.1em;
  position: absolute;
  top: 10.5vw;
  left: 8vw;
  /* sinさんのコード */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.textAnimation>span {
  display: inline-block;
}

.char {
  transform: translateY(130px);
  transition: transfrom 0.5s;
}


.about__p--01 {
  font-size: 2.7vw;
  text-align: left;
  position: absolute;
  left: 31vw;
  top: 33vw;
}

.about__p--01 span {
  font-size: 2.2vw;
  font-weight: 400;
}

.about__p--02 {
  font-size: 2.7vw;
  text-align: left;
  position: absolute;
  left: 31vw;
  top: 54vw;
}

.a--photo__img09 {
  width: 17vw;
  position: absolute;
  left: 69vw;
  top: 27vw;
}

.about__arrow__wrap {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding-top: 93vw;
}

.about__arrow {
  font-family: ryo-gothic-plusn, sans-serif;
  display: block;
  font-size: 3vw;
  font-weight: 200;
  animation: pyon02 infinite ease-out 1000ms;
}

@keyframes pyon02 {
  0% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -20%, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

.about__down {
  display: inline-block;
  font-weight: 400;
  font-size: 1.9vw;
  margin: 0 auto;
  border-bottom: .9px solid #2f2f27;
}

.a--photo__img04 {
  width: 26vw;
  position: absolute;
  top: 123vw;
  left: 12vw;
}

.a--photo__img01 {
  width: 39vw;
  position: absolute;
  left: 2vw;
  top: 154vw;
  z-index: 1;
}

.a--photo__img02 {
  width: 22vw;
  position: absolute;
  top: 214vw;
  right: 39vw;
}

.a--photo__img03 {
  width: 45vw;
  position: absolute;
  top: 262vw;
  left: 0vw;
}

.a--photo__img05 {
  width: 28vw;
  position: absolute;
  top: 183vw;
  right: 12vw;
}

.a--photo__img06 {
  width: 47vw;
  position: absolute;
  top: 129vw;
  right: 0vw;
}

.a--photo__img08 {
  width: 35vw;
  position: absolute;
  top: 220vw;
  right: 1vw;
}

.about__p--03 {
  font-size: 2.7vw;
  text-align: left;
  position: absolute;
  left: 5vw;
  top: 191vw;
}

.about__p--04 {
  font-size: 2.9vw;
  line-height: 1.7;
  position: absolute;
  left: 33vw;
  top: 278vw;

}

.about__p--05 {
  font-size: 2.9vw;
  line-height: 1.7;
  position: absolute;
  left: 36vw;
  top: 285vw;
}

.main-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 15vh;
}

.main-image {
  object-fit: cover;
  object-position: 50% 50%;
}

/* ==========================
about--pc
============================= */
@media screen and (min-width: 768px) {
  .about {
    margin-top: 118vh;
    height: 147vw;
    position: relative;
  }

  .about__area {
    position: relative;
  }

  .a__read {
    display: block;
    font-size: 3vw;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.1em;
    position: absolute;
    top: 2vw;
    left: 15vw;
    /* sinさんのコード */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }

  .a__read02 {
    font-size: 3vw;
    font-weight: 500;
    letter-spacing: 0.1em;
    position: absolute;
    top: 6.5vw;
    left: 15vw;
    /* sinさんのコード */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }

  .textAnimation>span {
    display: inline-block;
  }

  .char {
    transform: translateY(130px);
    transition: transfrom 0.5s;
  }


  .about__p--01 {
    font-size: 1.05vw;
    text-align: left;
    position: absolute;
    left: 50vw;
    top: 16vw;
  }

  .about__p--01 span {
    font-size: .9vw;
    font-weight: 400;
  }

  .about__p--02 {
    font-size: 1.05vw;
    text-align: left;
    position: absolute;
    left: 50vw;
    top: 23vw;
  }

  .a--photo__img09 {
    width: 17vw;
    position: absolute;
    left: 69vw;
    top: 27vw;
  }

  .about__arrow__wrap {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding-top: 40vw;
  }

  .about__arrow {
    font-family: ryo-gothic-plusn, sans-serif;
    display: block;
    font-size: 2vw;
    font-weight: 200;
    animation: pyon02 infinite ease-out 1000ms;
  }

  @keyframes pyon02 {
    0% {
      transform: translate3d(0, 0, 0);
    }

    50% {
      transform: translate3d(0, -20%, 0);
    }

    100% {
      transform: translate3d(0, 0, 0);
    }
  }

  .about__down {
    display: inline-block;
    font-weight: 400;
    font-size: .8vw;
    margin: 0 auto;
    border-bottom: .9px solid #2f2f27;
  }

  .a--photo__img01 {
    width: 31vw;
    position: absolute;
    left: 2vw;
    top: 64vw;
  }

  .a--photo__img02 {
    width: 20vw;
    position: absolute;
    top: 87vw;
    right: 36vw;
  }

  .a--photo__img03 {
    width: 30vw;
    position: absolute;
    top: 109vw;
    left: 0vw;
  }

  .a--photo__img04 {
    width: 18vw;
    position: absolute;
    top: 25vw;
    left: 15vw;
  }

  .a--photo__img05 {
    width: 23vw;
    position: absolute;
    top: 65vw;
    left: 51vw;

  }

  .a--photo__img06 {
    width: 31vw;
    position: absolute;
    top: 41vw;
    right: 0vw;
  }


  .a--photo__img08 {
    width: 27vw;
    position: absolute;
    top: 90vw;
    right: 2vw;
  }

  .about__p--03 {
    font-size: 1.05vw;
    text-align: left;
    position: absolute;
    left: 16vw;
    top: 93vw;
  }

  .about__p--04 {
    font-size: 1.2vw;
    position: absolute;
    left: 43vw;
    top: 118vw;
  }

  .about__p--05 {
    font-size: 1.2vw;
    line-height: 1.7;
    position: absolute;
    left: 44vw;
    top: 120.4vw;
  }

  .main-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
  }

  .main-image {
    object-fit: cover;
    object-position: 50% 50%;
  }
}

/* ==========================
features--sp
============================*/
.fea__spacer {
  height: 60vw;
}

.features {
  margin-top: 115vw;
  padding: 22vw 3.47% 0;
  margin-bottom: 10vw;
  position: relative;
}

.features__list {
  margin: 0 auto 0;
  width: 88vw;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

.features__img__inner {
  text-align: center;
  display: flex;
}

.features__img {
  display: block;
  margin: 10vw 0 3vw 0;
  width: 70vw;
  height: 95vw;
  object-fit: cover;
  object-position: 10% center;
}

.features__img--03 {
  display: block;
  margin: 10vw 0 3vw 0;
  width: 70vw;
  height: 95vw;
  object-fit: cover;
  object-position: 49% center;
}

.features__img__topic {
  display: block;
  width: 13.7vw;
  height: 100%;
  margin-top: 10vw;
}

.features__description {
  text-align: left;
  margin-top: .7vw;
}

.features__nmb {
  font-family: "darker-grotesque", sans-serif;
  font-size: 3vw;
  font-weight: 700;
  color: var(--primary-green, #1CFF69);
}

.features__topic {
  font-size: 3vw;
  display: inline-block;
  margin-left: 3vw;
}

.features__txt {
  margin-top: 5px;
  width: 88vw;
  font-size: 2.7vw;
}

/* ==========================
features--pc
============================*/
@media screen and (min-width: 768px) {
  .fea__spacer {
    height: 10vw;
  }

  .features {
    margin-top: 20vw;
    padding: 7vw 3.47% 0;
    margin-bottom: 10vw;
    position: relative;
  }

  .features__list {
    margin: 4vw auto 0;
    width: 90vw;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row;
  }

  .features__item {
    text-align: left;
  }

  .features__img__inner {
    text-align: center;
  }

  .features__img {
    margin: 0;
    width: 27.7vw;
    height: 41.2vw;
    object-fit: cover;
    object-position: 10% center;
  }

  .features__img--03 {
    margin: 0;
    width: 27.7vw;
    height: 41.2vw;
    object-fit: cover;
    object-position: center center;
  }

  .features__img__topic {
    display: none;
  }

  .features__description {
    text-align: left;
    margin-top: .7vw;
  }

  .features__nmb {
    font-family: "darker-grotesque", sans-serif;
    font-size: 1.1vw;
    font-weight: 700;
    color: var(--primary-green, #1CFF69);
  }

  .features__topic {
    font-size: 1.2vw;
    display: block;
    margin: 0;
  }

  .features__txt {
    font-size: 1vw;
    margin-top: 5px;
    width: 26vw;
  }
}

/* ==========================
recommend--sp
============================= */
.recommend {
  margin-top: 10vw;
  padding-top: 20vw;
}

.swiper {
  overflow-x: hidden !important;
}

/* swiper */
.mySwiper2 {
  height: 123vw;
  margin-top: 0;
}

.mySwiper {
  height: 25vw;
  width: 100%;
  margin-top: 3vw;
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
}

.swiper-slide__item {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.swiper-slide__img--main {
  position: absolute;
  width: 80.6vw;
  top: 13vw;
  left: 10vw;
}

.swiper-sticker01 {
  width: 24vw;
  position: absolute;
  top: 94vw;
  right: 2vw;
  z-index: 10;
}

.swiper-slide__description {
  margin-top: 0;
  position: absolute;
  width: 79vw;
  top: 80vw;
  left: 26vw;
  transform: rotate(2deg);
}

.swiper-slide__description::before {
  z-index: -1;
  position: absolute;
  top: 1.4vw;
  left: -10vw;
  width: 69.6vw;
  height: 34vw;
  background: #fff;
  content: "";
  transform: rotate(2deg);
  box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}

.swiper-slide__description::after {
  position: absolute;
  top: 2.3vw;
  left: -9vw;
  width: 84%;
  height: 31vw;
  border: 2px solid #bc0000;
  content: "";
  transform: rotate(2deg);
}

.swiper-slide__description h3 {
  color: var(--primary-black, #2f2f27);
  position: absolute;
  top: 8.5vw;
  left: 22.5vw;
  transform: translate(-50%, -50%) rotate(2deg);
  margin-bottom: 19px;
  font-size: 2.7vw;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  border-bottom: 1px solid var(--primary-black, #2f2f27);
}

.r-item--txt {
  color: var(--primary-black, #2f2f27);
  position: absolute;
  top: 11.4vw;
  left: 2.5vw;
  transform: translate(-50%, -50%);
  font-size: 2.7vw;
  font-weight: 400;
  width: 44vw;
  text-align: left;
  margin-top: 10px;
  transform: rotate(2deg);
}

.mySwiper .swiper-slide {
  width: 10vw;
  height: 100%;
  opacity: 0.4;
  position: relative;
}

.mySwiper img {
  width: 20vw;
}

.mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  display: none;
}

.swiper-button-prev,
.swiper-button-next {
  margin: 0 7vw;
  width: 55px;
  position: absolute;
}

.attention__wrap {
  margin: -5vw 3.47% 0 0;
  text-align: right;
}

.recommend__attention {
  font-size: 2vw;
  display: inline-block;
  position: relative;
  text-decoration: none;
}

.recommend__attention::before {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  background: var(--primary-black, #2f2f27);
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: -0.6em;
  will-change: transform;
  transform: scaleX(0) translateZ(0);
  transform-origin: 100% 0;
  transition: transform 0.5scubic-bezier(0.33, 1, 0.68, 1);
}

.recommend__attention span {
  font-weight: 600;
  display: inline-block;
  font-size: 2vw;
  transform: rotate(45deg);
}

.recommend__attention:hover::before {
  transform: scaleX(1) translateZ(0);
  transform-origin: 0% 0;
  transition: transform 0.5s 0.2s cubic-bezier(0.33, 1, 0.68, 1);
}

/* ==========================
recommend--pc
=========================== */
@media screen and (min-width: 768px) {
  .recommend {
    margin-top: 13vw;
    padding: 7vw 3.47% 0;
  }

  .swiper {
    overflow-x: hidden !important;
  }

  /* swiper */
  .mySwiper2 {
    height: 34vw;
    margin-top: -6vw;
  }

  .mySwiper {
    height: 13vw;
    width: 80vw;
    margin-top: 4vw;
  }

  .swiper-slide {
    /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
    color: #ffffff;
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .swiper-slide__item {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .swiper-slide__img--main {
    position: absolute;
    width: 32.6vw;
    top: 11vw;
    left: 15vw;
  }

  .swiper-sticker01 {
    width: 10vw;
    position: absolute;
    top: 23vw;
    right: 8vw;
    z-index: 10;
  }

  .swiper-slide__description {
    margin-top: 0;
    position: absolute;
    width: 31vw;
    top: 9vw;
    left: 48vw;
    transform: rotate(2deg);
  }

  .swiper-slide__description::before {
    z-index: -1;
    position: absolute;
    top: 1.4vw;
    left: 6vw;
    width: 26.6vw;
    height: 20vw;
    background: #fff;
    content: "";
    transform: rotate(2deg);
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
  }

  .swiper-slide__description::after {
    position: absolute;
    top: 2.3vw;
    left: 6.8vw;
    width: 80%;
    height: 18vw;
    border: 2px solid #bc0000;
    content: "";
    transform: rotate(2deg);
  }


  .swiper-slide__description h3 {
    color: var(--primary-black, #2f2f27);
    position: absolute;
    top: 6vw;
    left: 18.5vw;
    transform: translate(-50%, -50%) rotate(2deg);
    margin-bottom: 19px;
    font-size: 1.3vw;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.2;
    border-bottom: 1px solid var(--primary-black, #2f2f27);
  }

  .r-item--txt {
    color: var(--primary-black, #2f2f27);
    position: absolute;
    top: 8.4vw;
    left: 11.5vw;
    transform: translate(-50%, -50%);
    font-size: 1.1vw;
    font-weight: 500;
    width: 16vw;
    text-align: left;
    margin-top: 10px;
    transform: rotate(2deg);
  }

  .mySwiper .swiper-slide {
    width: 10vw;
    height: 100%;
    opacity: 0.4;
    /* margin-top: -158px; */
    position: relative;
  }

  .mySwiper img {
    width: 15vw;
  }

  .mySwiper .swiper-slide-thumb-active {
    opacity: 1;
  }

  .swiper-button-prev:after,
  .swiper-button-next:after {
    display: none;
  }

  .swiper-button-prev,
  .swiper-button-next {
    margin: 0 7vw;
    width: 55px;
    position: absolute;
  }

  .attention__wrap {
    margin: 0 30px 10vw;
    text-align: right;
  }

  .recommend__attention {
    font-size: .8vw;
    display: inline-block;
    position: relative;
    text-decoration: none;
  }

  .recommend__attention::before {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    background: var(--primary-black, #2f2f27);
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: -0.6em;
    will-change: transform;
    transform: scaleX(0) translateZ(0);
    transform-origin: 100% 0;
    transition: transform 0.5scubic-bezier(0.33, 1, 0.68, 1);
  }

  .recommend__attention span {
    font-weight: 600;
    display: inline-block;
    font-size: 1.5rem;
    transform: rotate(45deg);
  }

  .recommend__attention:hover::before {
    transform: scaleX(1) translateZ(0);
    transform-origin: 0% 0;
    transition: transform 0.5s 0.2s cubic-bezier(0.33, 1, 0.68, 1);
  }
}

/* ==========================
instagram--sp
=========================== */

/*背景テキスト*/
.instagram {
  overflow: hidden;
}

.i__scroll__x {
  font-family: "darker-grotesque", sans-serif;
  font-size: 40vw;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 2;
  opacity: 1;
  -webkit-text-stroke: 1px #2f2f27;
}

.i__scroll__x span {
  font-family: "darker-grotesque", sans-serif;
  color: #1CFF69;
  font-weight: 500;
  letter-spacing: -0.03em;
}

/* ==========================
instagram--pc
=========================== */
@media screen and (min-width: 768px) {

  /*背景テキスト*/
  .instagram {
    overflow: hidden;
    margin-bottom: 0;
  }

  .i__scroll__x {
    font-family: "darker-grotesque", sans-serif;
    font-size: 10vw;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.2;
    opacity: 1;
    -webkit-text-stroke: 1px #2f2f27;
  }

  .i__scroll__x span {
    font-family: "darker-grotesque", sans-serif;
    color: #1CFF69;
    font-weight: 500;
    letter-spacing: -0.03em;
  }
}

/* ==========================
history--sp
===========================
*/
.h__spacer01 {
  width: 100%;
  height: 0;
}

.h__spacer02 {
  width: 100%;
  height: 0;
  position: relative;
}

.history {
  padding-top: 0;
  position: relative;
  margin-right: 0;
}

.slider__wrapper {
  width: 100%;
  height: auto;
  display: flex;
  text-align: left;
  align-items: flex-start;
  flex-direction: column;
  padding: 0;
  position: relative;
}

.slider__wrap-left {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 24vw;
  margin: 0;
  z-index: 90;
}

.left__img {
  width: 100vw;
  height: 59vw;
  object-fit: cover;
  overflow: hidden;
}

.left__img img {
  height: 100%;
  width: 100%;
}

.slider__wrap-right {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 10;
  position: relative;
}

/* .slider__wrap-list {
  padding-top: 7vw;
} */

.h__topicHeading {
  padding-top: 9vw;
  position: absolute;
  top: 1vw;
  left: 3.47%;
  right: 0;
  text-align: left;
  color: var(#2f2f27);
  opacity: 1;
  /* spのみ */
  background-image: url(../images/bg.png);
  z-index: 90;
}

.h__topic {
  font-family: "darker-grotesque", sans-serif;
  font-size: 10vw;
  font-weight: 600;
  line-height: 0.4;
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: 2.6vw;
  color: var(--primary-black, #2f2f27);
}

.h__topic__ja {
  font-family: ryo-gothic-plusn, sans-serif;
  font-weight: 400;
  font-size: 2.3vw;
  line-height: 1;
  letter-spacing: 0.07em;
  margin-left: .5vw;
  color: var(--primary-black, #2f2f27);
}

/* ページネーション */
.pagination {
  position: absolute;
  top: 130vw;
  right: 37vw;
  font-family: "darker-grotesque", sans-serif;
  font-size: 3vw;
  font-weight: 600;
  color: var(--primary-black, #2f2f27);
  opacity: 1;
  z-index: 10;
  text-align: center;
  width: 25vw;
}


.slider__wrap-right .txt-box {
  height: 100%;
  padding: 12vw 0 0 0;
}

.slider__wrap-right .txt-box:first-of-type {
  height: 100%;
  margin-top: 23vw;
}

.txt-box-nb {
  font-family: "darker-grotesque", sans-serif;
  font-size: 3.1vw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: 9.5px;
  color: #1CFF69;
}

.txt-box-topic {
  font-size: 3vw;
  font-weight: 600;
  margin-top: -1.8vw;
  letter-spacing: .05em;
}

.slider__wrap-right .txt-box p {
  width: 83vw;
  margin-top: 8px;
  font-size: 2.7vw;
  letter-spacing: 0.07em;
  line-height: 2;
}


/* ==========================
history--pc
===========================
*/
@media screen and (min-width: 768px) {
  .h__spacer01 {
    width: 100%;
    height: 0;
    position: relative;
    margin-top: 0;
  }

  .h__spacer02 {
    width: 100%;
    height: 10vw;
    position: relative;
  }

  .history {
    position: relative;
    margin-right: 3.47%;
  }

  .slider__wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    text-align: left;
    align-items: flex-start;
    flex-direction: row;
    padding: 0;
    position: relative;
    margin-top: -11vw;
  }

  /* ポインタ */
  .js-custom-cursor {
    cursor: url('../images/2arrow.png'), auto;
    /* カスタム画像に変更 */
  }

  .slider__wrap-right {
    width: 40%;
    height: 100%;
    /*  */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    /* 内容が溢れないように制限 */
  }

  .h__topicHeading {
    position: absolute;
    top: 21vw;
    left: 64vw;
    text-align: left;
    color: #2f2f27;
    opacity: 1;
    /* spのみ */
    background-image: none;
  }

  .h__topic {
    font-family: "darker-grotesque", sans-serif;
    font-size: 4vw;
    font-weight: 600;
    line-height: 0.4;
    letter-spacing: -0.01em;
    display: block;
    margin-bottom: 1vw;
    color: var(--primary-black, #2f2f27);
  }

  .h__topic__ja {
    font-family: ryo-gothic-plusn, sans-serif;
    font-weight: 400;
    font-size: 1vw;
    line-height: 1;
    letter-spacing: 0.07em;
    color: var(--primary-black, #2f2f27);
  }

  /* ページネーション */
  .pagination {
    position: absolute;
    top: 78vw;
    right: 14vw;
    font-family: "darker-grotesque", sans-serif;
    font-size: 1vw;
    font-weight: 600;
    color: var(--primary-black, #2f2f27);
    opacity: 1;
    z-index: 10;
    width: 10vw;
    text-align: center;
  }

  .slider__wrap-left {
    width: 60%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0;
  }

  .left__img {
    width: 60vw;
    height: 100vh;
    object-fit: cover;
    overflow: hidden;
  }

  .left__img img {
    height: 100%;
    object-fit: cover;
  }

  .slider__wrap-right .txt-box {
    height: 30vw;
    padding: 17vw 0 17vw 6vw;
  }

  .slider__wrap-right .txt-box:first-of-type {
    height: 100%;
    margin-top: 45vw;
    padding: 17vw 0 17vw 6vw;
  }

  .txt-box-nb {
    font-family: "darker-grotesque", sans-serif;
    font-size: 1vw;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    display: block;
    margin-bottom: 10px;
    color: #1CFF69;
  }

  .txt-box-topic {
    font-size: 1.2vw;
    font-weight: 600;
    margin-top: 1.6rem;
    letter-spacing: .05em;
  }

  .slider__wrap-right .txt-box p {
    width: 28vw;
    margin-top: 1.3vw;
    font-size: 1vw;
    letter-spacing: 0.07em;
    line-height: 2;
  }
}

@media (max-height: 779px) {
  .pagination {
    top: 70vw;
    /* 縦幅が小さい場合に、表示位置を調整 */
  }
}

/* ==========================
message--sp
========================== */
.m__space-01 {
  height: 30vw;
}

.m__space-02 {
  height: 56vw;
}

.message {
  padding: 8vw 5.3% 0;
  margin-bottom: 35vw;
}

.message__frex {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}

/* パララックス */
.message__img--01 {
  width: 62vw;
  height: 84vw;
  object-position: 38% top;
  object-fit: cover;
}

.messageImg {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.message__name {
  margin: 5vw auto auto -.8vw;
  font-family: "darker-grotesque", sans-serif;
  font-size: 9.5vw;
  font-weight: 600;
  line-height: 0;
  letter-spacing: -0.05em;
  display: inline-block;
}

.message__name__ja {
  margin: -1vw auto auto 49vw;
  font-size: 2.4vw;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.messageImg2 {
  position: absolute;
  right: 5vw;
}

.message__img--02 {
  width: 23vw;
  height: 30vw;
  object-position: 38% top;
  object-fit: cover;
  margin-left: 23vw;
}

.message__description {
  width: 63vw;
  position: relative;
  text-align: left;
}

.message__txt {
  font-size: 2.7vw;
  letter-spacing: .05em;
  line-height: 2;
  width: 100%;
  position: absolute;
  right: 0;
  top: 6vw;
}

.message__txt--02 {
  font-size: 2.7vw;
  letter-spacing: .05em;
  line-height: 2;
  width: 100%;
  position: absolute;
  right: 0;
  top: 67vw;
}

/* ==========================
message--pc
========================== */
@media screen and (min-width: 768px) {
  .m__space-01 {
    height: 40vw;
  }

  .m__space-02 {
    height: 0;
  }

  .message {
    padding: 10vw 5.3% 0;
    margin-bottom: 0;
  }

  .message__frex {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
  }

  /* パララックス */
  .message__img--01 {
    width: 40vw;
    height: 54vw;
    object-position: 38% top;
    object-fit: cover;
  }

  .messageImg {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .message__name {
    margin: 2vw auto auto -.3vw;
    font-family: "darker-grotesque", sans-serif;
    font-size: 5vw;
    font-weight: 600;
    line-height: 0;
    letter-spacing: -0.05em;
  }

  .message__name__ja {
    display: inline-block;
    margin: 0 0 0 25.5vw;
    font-size: 1vw;
    letter-spacing: -0.05em;
  }

  .messageImg2 {
    position: static;
    right: 0;
    margin-left: 10vw;
  }

  .message__img--02 {
    width: 16vw;
    height: 25vw;
    object-position: 38% top;
    object-fit: cover;
  }

  .message__description {
    width: 39.7vw;
    position: relative;
    text-align: left;
  }

  .message__txt {
    font-size: 1vw;
    letter-spacing: .05em;
    line-height: 2;
    width: 38vw;
    position: absolute;
    right: 0;
    top: 35vw;
  }

  .message__txt--02 {
    font-size: 1vw;
    letter-spacing: .05em;
    line-height: 2;
    width: 38vw;
    position: absolute;
    right: 0;
    top: 50vw;
  }
}

/* 
==========================
recruit--sp
========================== */

.recruit {
  padding: 40vw 5.3% 0;
  margin-bottom: 25vw;
}

.recruit__bg {
  padding: 20vw 0;
  width: 100%;
  height: 10vw;
  background-color: #2f2f27;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recruitHeading {
  margin-left: 12vw;
}

.recruit__topic {
  font-family: "darker-grotesque", sans-serif;
  font-size: 9vw;
  color: #FFFFFF;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 1vw;
}

.recruit__sub {
  font-size: 2.6vw;
  color: #FFFFFF;
  line-height: 1;
}

.re__btn_box {
  position: relative;
  display: inline-block;
  overflow: hidden;
  /* ボタンが画面外に出たときに非表示にするため */
  width: 8.5vw;
  margin-right: 10vw;
}

.btn_ellipse {
  font-weight: 200;
  font-size: 7.5vw;
  color: #FFF;
  position: relative;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

/* ホバー時のアニメーション */
a:hover .btn_ellipse {
  animation: slideInOut .6s ease-in-out;
  /* 繰り返しを無効にして1回で終了 */
}

/* アニメーションの定義 */
@keyframes slideInOut {
  0% {
    transform: translateX(0);
    /* 初期位置 */
    opacity: 1;
    /* 完全に表示 */
  }

  45% {
    transform: translateX(150%);
    /* 右へ移動して画面外に出る */
    opacity: 0;
    /* 消える */
  }

  55% {
    transform: translateX(-150%);
    /* 左側から再び出現 */
    opacity: 0;
    /* まだ非表示 */
  }

  100% {
    transform: translateX(0);
    /* 元の位置に戻る */
    opacity: 1;
    /* 完全に表示 */
  }
}


/* 
==========================
recruit--pc
========================== */
@media screen and (min-width: 768px) {

  .recruit {
    padding: 10vw 5.3% 0;
    margin-bottom: 60vw;
  }

  .recruit__bg {
    padding: 3vw 0;
    width: 100%;
    height: 10vw;
    background-color: #2f2f27;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .recruitHeading {
    margin-left: 29vw;
  }

  .recruit__topic {
    font-family: "darker-grotesque", sans-serif;
    font-size: 5vw;
    color: #FFFFFF;
    font-weight: 600;
    line-height: 1;
  }

  .recruit__sub {
    font-size: 1.1vw;
    color: #FFFFFF;
    line-height: 1;
  }

  .re__btn_box {
    position: relative;
    display: inline-block;
    overflow: hidden;
    /* ボタンが画面外に出たときに非表示にするため */
    width: 3.5vw;
    margin-right: 17vw;
  }

  .btn_ellipse {
    font-weight: 200;
    font-size: 3.5vw;
    color: #FFF;
    position: relative;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  }

  /* ホバー時のアニメーション */
  a:hover .btn_ellipse {
    animation: slideInOut .6s ease-in-out;
    /* 繰り返しを無効にして1回で終了 */
  }

  /* アニメーションの定義 */
  @keyframes slideInOut {
    0% {
      transform: translateX(0);
      /* 初期位置 */
      opacity: 1;
      /* 完全に表示 */
    }

    45% {
      transform: translateX(150%);
      /* 右へ移動して画面外に出る */
      opacity: 0;
      /* 消える */
    }

    55% {
      transform: translateX(-150%);
      /* 左側から再び出現 */
      opacity: 0;
      /* まだ非表示 */
    }

    100% {
      transform: translateX(0);
      /* 元の位置に戻る */
      opacity: 1;
      /* 完全に表示 */
    }
  }
}


/* ==========================
footer
===========================
*/
.footer {
  position: relative;
}

.footer__bg {
  /* position: absolute; */
  top: 50%;
  left: 50%;
  /* transform: translate(-50%, -50%); */
  object-position: 29% 50%;
  /* overflow: visible; */
  height: 190vw;
  width: 100%;
  object-fit: cover;
  z-index: -1;
}

/* Back to top　button */
/* ボタンのスタイル */
.top {
  width: 16.3vw;
  height: 16.3vw;
  margin-bottom: 1rem;
  background-color: transparent;
  border: none;
  cursor: pointer;

  z-index: 100;
  text-align: center;
  position: absolute;
  top: 66vw;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btt-circle {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2px;
  transition: fill 0.3s cubic-bezier(.4, 0, .2, 1), stroke 0.3s cubic-bezier(.4, 0, .2, 1);
}

.btt-arrow {
  fill: #FFFFFF;
  transition: fill 0.3s cubic-bezier(.4, 0, .2, 1);
}

/* ホバー時の色を反転 */
.top:hover .btt-arrow {
  fill: #2f2f27;
  /* ホバー時に矢印の色を白に変更 */
}

.top:hover .btt-circle {
  fill: #1CFF69;
  stroke: #2f2f27;
}

.f__logo {
  width: 33.2vw;
}

.footer__wrap {
  margin-bottom: 1vw;
}

.footer__item {
  position: absolute;
  top: 146vw;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 100%;
}

.footer__storeInfo {
  margin-top: 2vw;
}

.footer__storeInfo__item01 {
  font-size: 2.7vw;
  color: #FFF;
  letter-spacing: 0.02em;
  display: inline-block;
}

.footer__storeInfo__item03 {
  font-size: 2.7vw;
  color: #FFF;
  letter-spacing: 0.02em;
  margin-bottom: 2vw;
}

.google-map,
.google-map__arrow__img {
  font-family: "darker-grotesque", sans-serif;
  font-size: 2.7vw;

  /* ↓インラインブロック、超大事。 */
  display: inline-block;
  line-height: 1;
  overflow: hidden;
  color: transparent;
  text-shadow: 0 -1.5em 0 #FFF, 0 0 0 #FFF;
  transition: text-shadow 0.3s;
}

.google-map__arrow__img {
  margin-left: 0vw;
  width: 0.7vw;
  transform: rotate(-45deg);
  /* 初期状態で45度回転 */
  transition: transform 0.3s ease-in-out;
  /* 回転アニメーションのためのトランジション */
}

/* ホバー時のaタグのアニメーション */
.google-map:hover {
  text-shadow: 0 0 0 #FFF, 0 1.5em 0 #FFF;
}

/* aタグがホバーされたときに画像も回転 */
.google-map:hover .google-map__arrow__img {
  transform: rotate(-45deg);
  /* 回転を元に戻す */
}

.footer__sns {
  width: 48vw;
  display: flex;
  justify-content: space-between;
  gap: 1vw;
  text-align: center;
  margin: 0 auto;
}

.footer__sns__item,
.footer__sns__item__img {
  font-family: "darker-grotesque", sans-serif;
  font-size: 3vw;

  line-height: 1;
  overflow: hidden;
  color: transparent;
  text-shadow: 0 -1.5em 0 #FFF, 0 0 0 #FFF;
  transition: text-shadow 0.3s;
}

/* 矢印 */
.footer__sns__item__img {
  margin-left: 0vw;
  width: 2vw;
  transform: rotate(-45deg);
  /* 初期状態で45度回転 */
  transition: transform 0.3s ease-in-out;
  /* 回転アニメーションのためのトランジション */
}

/* ホバー時のaタグのアニメーション */
.footer__sns__item:hover {
  text-shadow: 0 0 0 #FFF, 0 1.5em 0 #FFF;
}

/* aタグがホバーされたときに画像も回転 */
.footer__sns__item:hover .footer__sns__item__img {
  transform: rotate(-45deg);
  /* 回転を元に戻す */
}

.footer__copy {
  font-size: 1.7vw;
  margin-top: 4vw;
  color: #6b6b61;
}


/* ==========================
footer--pc
===========================
*/
@media screen and (min-width: 768px) {
  .footer {
    margin-top: 67vw;
    position: relative;
  }

  .footer__bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    height: 110vw;
    width: 100vw;
    object-fit: cover;
    z-index: -1;
  }

  /* Back to top　button */
  /* ボタンのスタイル */
  .top {
    width: 6.3vw;
    height: 6.3vw;
    margin-bottom: 1rem;
    background-color: transparent;
    border: none;
    cursor: pointer;

    z-index: 1000;
    text-align: center;
    text-align: center;
    position: absolute;
    top: 5vw;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .btt-circle {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2px;
    transition: fill 0.3s cubic-bezier(.4, 0, .2, 1), stroke 0.3s cubic-bezier(.4, 0, .2, 1);
  }

  .btt-arrow {
    fill: #FFFFFF;
    transition: fill 0.3s cubic-bezier(.4, 0, .2, 1);
  }

  /* ホバー時の色を反転 */
  .top:hover .btt-arrow {
    fill: #2f2f27;
    /* ホバー時に矢印の色を白に変更 */
  }

  .top:hover .btt-circle {
    fill: #1CFF69;
    stroke: #2f2f27;
  }

  .f__logo {
    width: 18.2vw;
  }

  .footer__wrap {
    margin-bottom: 1vw;
  }

  .footer__item {
    position: absolute;
    top: 36vw;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 100%;
  }

  .footer__storeInfo {
    margin-top: 2vw;
  }

  .footer__storeInfo__item01 {
    font-size: .8vw;
    color: #FFF;
    letter-spacing: 0.02em;
    display: inline-block;
  }

  .footer__storeInfo__item03 {
    font-size: .8vw;
    color: #FFF;
    letter-spacing: 0.02em;
    margin-bottom: 1vw;
  }

  .google-map,
  .google-map__arrow__img {
    font-family: "darker-grotesque", sans-serif;
    font-size: 1vw;

    /* ↓インラインブロック、超大事。 */
    display: inline-block;
    line-height: 1;
    overflow: hidden;
    color: transparent;
    text-shadow: 0 -1.5em 0 #FFF, 0 0 0 #FFF;
    transition: text-shadow 0.3s;
  }

  .google-map__arrow__img {
    margin-left: 0vw;
    width: 0.7vw;
    transform: rotate(-45deg);
    /* 初期状態で45度回転 */
    transition: transform 0.3s ease-in-out;
    /* 回転アニメーションのためのトランジション */
  }

  /* ホバー時のaタグのアニメーション */
  .google-map:hover {
    text-shadow: 0 0 0 #FFF, 0 1.5em 0 #FFF;
  }

  /* aタグがホバーされたときに画像も回転 */
  .google-map:hover .google-map__arrow__img {
    transform: rotate(-45deg);
    /* 回転を元に戻す */
  }

  .footer__sns {
    width: 16vw;
    display: flex;
    justify-content: space-between;
    gap: 1vw;
    text-align: center;
    margin: 0 auto;
  }

  .footer__sns__item,
  .footer__sns__item__img {
    font-family: "darker-grotesque", sans-serif;
    font-size: 1vw;

    line-height: 1;
    overflow: hidden;
    color: transparent;
    text-shadow: 0 -1.5em 0 #FFF, 0 0 0 #FFF;
    transition: text-shadow 0.3s;
  }

  /* 矢印 */
  .footer__sns__item__img {
    margin-left: 0vw;
    width: 0.7vw;
    transform: rotate(-45deg);
    /* 初期状態で45度回転 */
    transition: transform 0.3s ease-in-out;
    /* 回転アニメーションのためのトランジション */
  }

  /* ホバー時のaタグのアニメーション */
  .footer__sns__item:hover {
    text-shadow: 0 0 0 #FFF, 0 1.5em 0 #FFF;
  }

  /* aタグがホバーされたときに画像も回転 */
  .footer__sns__item:hover .footer__sns__item__img {
    transform: rotate(-45deg);
    /* 回転を元に戻す */
  }

  .footer__copy {
    font-size: .7vw;
    margin-top: 4vw;
    color: #6b6b61;
  }
}

/* end--readキラキラ　できない！！ */
/* .readEnd {
  font-size: 1.2vw;
  font-weight: 500;
  position: absolute;
  left: 42vw;
  top: 135vw;
  clip-path: inset(0);
  color: transparent;
  background-image: linear-gradient(#FFFFFF 0%,
      #5e5f1e 39%,
      #9e9c3a 41%,
      #cdcb4f 42.75%,
      #e6e2b0 46%,
      #f7f5e6 47.5%,
      #f0f3c9 49%,
      #e8e9a7 51.5%,
      #d1d36c 54.25%,
      #b4b246 56.25%,
      #fffeea 59%,
      #FFF 100%);
  background-position: 0% 0%;
  background-size: 500% 100%;
  background-clip: text;
} */