:root {
  --fullHeight: 100dvh;
}

main {
  overflow: visible;
}

#content .wrapper .inner {
  position: relative;
  z-index: 2;
}

#header #key {
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  #header #key {
    width: 1298px;
    margin: 0 auto;
    max-width: calc(100% - 206px);
  }
}
@media screen and (min-width: 769px) and (max-width: 1279px) {
  #header #key {
    max-width: calc(100% - 100px);
  }
}
@media screen and (max-width: 768px) {
  #header #key {
    max-width: 100%;
  }
}
#header #key .inner {
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 1000px) {
  #header #key .inner {
    width: 977px;
    max-width: calc(100% - 300px);
    padding: 31px 0 0;
  }
}
@media screen and (min-width: 1000px) and (max-width: 1600px) {
  #header #key .inner {
    max-width: calc(100% - 375px);
  }
}
@media screen and (min-width: 1000px) and (max-width: 1279px) {
  #header #key .inner {
    padding-top: 70px;
  }
}
@media screen and (min-width: 1000px) and (max-width: 999px) {
  #header #key .inner {
    max-width: calc(100% - 290px);
  }
}
@media screen and (max-width: 999px) {
  #header #key .inner {
    padding: 131px 0 0;
  }
}
@media screen and (max-width: 999px) and (max-width: 390px) {
  #header #key .inner {
    padding-top: 140px;
  }
}
#header #key .inner .group-key {
  position: relative;
}
#header #key .inner .group-key .deco {
  position: absolute;
  z-index: 2;
}
#header #key .inner .group-key .deco.deco1 {
  width: 108.5px;
  top: 0;
  left: 66px;
  max-width: 13%;
}
@media screen and (max-width: 767px) {
  #header #key .inner .group-key .deco.deco1 {
    left: 57px;
    width: 124px;
    max-width: 100%;
  }
}
@media screen and (max-width: 767px) and (max-width: 600px) {
  #header #key .inner .group-key .deco.deco1 {
    width: 92px;
    top: -25px;
    left: 33.5px;
  }
}
#header #key .inner .group-key .deco.deco2 {
  width: 151px;
  top: 0;
  right: 48px;
  max-width: 17%;
}
@media screen and (max-width: 767px) {
  #header #key .inner .group-key .deco.deco2 {
    top: -61px;
    width: 149px;
    right: 37px;
    max-width: 100%;
  }
}
@media screen and (max-width: 767px) and (max-width: 600px) {
  #header #key .inner .group-key .deco.deco2 {
    width: 127px;
    top: -70px;
    right: 34px;
  }
}
#header #key .inner .group-key .deco.deco3 {
  width: 201px;
  bottom: -107px;
  left: 131.5px;
  max-width: 22%;
}
@media screen and (max-width: 1400px) {
  #header #key .inner .group-key .deco.deco3 {
    left: 70px;
  }
}
@media screen and (max-width: 767px) {
  #header #key .inner .group-key .deco.deco3 {
    width: 147px;
    left: 42.5px;
    bottom: -41px;
    max-width: 100%;
  }
}
@media screen and (max-width: 767px) and (max-width: 600px) {
  #header #key .inner .group-key .deco.deco3 {
    width: 109px;
    left: 34px;
    bottom: -54px;
  }
}
#header #key .inner .group-key .deco.deco4 {
  width: 276px;
  bottom: -157px;
  right: 178.5px;
  max-width: 30%;
}
@media screen and (max-width: 1400px) {
  #header #key .inner .group-key .deco.deco4 {
    right: 70px;
    bottom: -20%;
  }
}
@media screen and (max-width: 767px) {
  #header #key .inner .group-key .deco.deco4 {
    bottom: -60px;
    right: 50px;
    width: 234px;
    max-width: 100%;
  }
}
@media screen and (max-width: 767px) and (max-width: 600px) {
  #header #key .inner .group-key .deco.deco4 {
    width: 178px;
    right: 50px;
    bottom: -128px;
  }
}
@media screen and (max-width: 767px) {
  #header #key .inner .group-key .key-slide {
    padding: 0 58.5px;
  }
}
@media screen and (max-width: 767px) and (max-width: 390px) {
  #header #key .inner .group-key .key-slide {
    padding: 0 36.5px;
  }
}
#header #key .inner .group-key .key-slide .img {
  text-align: center;
}
#header #key .inner .group-key .key-slide .img img {
  max-height: 758.5px;
  width: auto;
  max-width: 100%;
  display: inline-block !important;
}
#header #key .inner .key-loopslide {
  margin-top: 193px;
}
#header #key .inner .key-loopslide p {
  margin-right: 20px;
  max-width: calc(100% - 20px);
}
@media screen and (max-width: 1400px) {
  #header #key .inner .key-loopslide {
    margin-top: 150px;
  }
}
@media screen and (max-width: 767px) {
  #header #key .inner .key-loopslide {
    margin-top: 46px;
  }
}
@media screen and (max-width: 767px) and (max-width: 390px) {
  #header #key .inner .key-loopslide {
    margin: 128px -38.5px 0;
  }
}
#header #key .inner .key-loopslide2 {
  margin-top: 20px;
}
#header #key .inner .key-loopslide2 p {
  margin-right: 20px;
  max-width: calc(100% - 20px);
}
@media screen and (max-width: 767px) and (max-width: 390px) {
  #header #key .inner .key-loopslide2 {
    margin: 20px -38.5px 0;
  }
  #header #key .inner .key-loopslide2 p {
    margin-right: 10px;
    max-width: calc(100% - 10px);
  }
}

:root {
  --delay: 2s;
  --duration: 800ms;
  --iterations: 1;
}

#about {
  position: relative;
  padding: 224.5px 0 0;
}
@media screen and (max-width: 767px) {
  #about {
    padding-top: 79px;
  }
}
#about .group-title {
  text-align: center;
  position: relative;
}
#about .group-title::before {
  content: "";
  position: absolute;
  width: 174px;
  height: 174px;
  background: #FFEAA3;
  mix-blend-mode: multiply;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}
@media screen and (max-width: 767px) {
  #about .group-title::before {
    width: 117px;
    height: 117px;
    top: -31px;
  }
}
#about .group-title .deco1 {
  position: absolute;
  width: 124.5px;
  top: 19px;
  left: calc(50% + 178px);
}
@media screen and (max-width: 767px) {
  #about .group-title .deco1 {
    left: auto;
    right: 0;
    top: 117px;
  }
}
#about .group-title .deco2 {
  position: absolute;
  right: calc(50% + 132px);
  width: 91px;
  top: -73px;
}
@media screen and (max-width: 767px) {
  #about .group-title .deco2 {
    width: 62.5px;
    top: 28px;
    right: calc(50% + 99px);
  }
}
#about .group-title .deco3 {
  width: 44.5px;
  position: absolute;
  top: -34px;
  left: calc(50% + 143px);
}
@media screen and (max-width: 767px) {
  #about .group-title .deco3 {
    left: calc(50% + 102px);
    top: -17px;
    width: 30.5px;
  }
}
#about .group-title h2 {
  position: relative;
  z-index: 2;
  font-size: 70px;
  line-height: 82px;
}
#about .group-title h2 span {
  display: inline-block;
}
@media screen and (max-width: 767px) {
  #about .group-title h2 {
    font-size: 39px;
    line-height: 46px;
  }
}
#about .group-title .sub-tit {
  line-height: 21px;
  margin: -3px 0 0;
  font-size: 16px;
}
@media screen and (max-width: 767px) {
  #about .group-title .sub-tit {
    font-size: 12px;
    line-height: 16px;
    margin: -2px 0 0;
  }
}
#about .tit {
  position: absolute;
  left: 0;
  font-size: 42px;
  line-height: 50px;
  top: 187px;
}
#about .tit span {
  letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
  #about .tit {
    display: none;
  }
}
#about .txt {
  width: 410px;
  margin: 64px auto 0;
  max-width: calc(100% - 100px);
}
@media screen and (max-width: 999px) {
  #about .txt {
    max-width: calc(100% - 190px);
  }
}
@media screen and (max-width: 767px) {
  #about .txt {
    width: auto;
    margin: 64px 140px 0 20px;
    max-width: 100%;
  }
}
#about .insta {
  width: 559px;
  margin: -6px auto 57px;
  max-width: calc(100% - 102px);
  text-align: right;
}
#about .insta a {
  display: inline-block;
  position: relative;
  z-index: 2;
}
#about .insta img {
  width: 120px;
}
@media screen and (max-width: 767px) {
  #about .insta {
    max-width: calc(100% - 42px);
    margin: -59px auto 83px;
  }
  #about .insta img {
    width: 106px;
  }
}
#about .group {
  display: flex;
  position: relative;
  align-items: flex-start;
  gap: 0 37px;
  padding: 0 0 132px;
  background: url("../img/index/deco_bg7.png") no-repeat bottom right/327px auto, url("../img/index/deco_bg6.png") no-repeat bottom right/565px auto;
}
#about .group::before {
  content: "";
  position: absolute;
  background: url("../img/index/deco_bg1.png") no-repeat top right/383px auto;
  width: 383px;
  height: 378px;
  top: -162px;
  left: 0;
}
#about .group .img {
  width: 367px;
  position: relative;
  z-index: 2;
  -webkit-mask-image: url("../img/index/mask_img2.png");
          mask-image: url("../img/index/mask_img2.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
          mask-size: 100% auto;
}
#about .group .group-txt {
  width: 303px;
  margin: 118px 0 0;
  position: relative;
  z-index: 2;
}
#about .group .group-txt h2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
}
#about .group .group-txt h2 span {
  font-size: 49px;
  line-height: 0.9;
  letter-spacing: 0.05em;
  font-weight: 400;
  padding: 3px 11px 0 5px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
#about .group .group-txt h2 span::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: #FFD800;
  transition: left 0.3s ease;
}
#about .group .group-txt h2.run span:before {
  left: 0;
}
#about .group .group-txt .txt2 {
  margin: 31px 0 0;
}
@media screen and (max-width: 1280px) {
  #about .group {
    background-size: 248px auto, 565px auto;
    padding-bottom: 172px;
    gap: 0;
    padding-right: 50px;
  }
  #about .group::before {
    width: 285px;
    top: -132px;
    background-size: 100% auto;
  }
  #about .group .img {
    width: 367px;
  }
  #about .group .group-txt {
    margin: 92px 0 0 -38px;
    width: auto;
  }
  #about .group .group-txt h2 span {
    font-size: 38px;
    padding-top: 2px 6px 0 4px;
  }
  #about .group .group-txt .txt2 {
    width: 157px;
    margin: 29px 0 0 64px;
  }
}
@media screen and (max-width: 767px) {
  #about .group {
    padding-bottom: 184px;
    display: block;
    padding-right: 0;
    background: url("../img/index/deco_bg7.png") no-repeat bottom right/248px auto, url("../img/index/deco_bg6_sp.png") no-repeat bottom right/349px auto;
  }
  #about .group::before {
    top: -121px;
  }
  #about .group .img {
    width: calc(100% - 26px);
  }
  #about .group .group-txt {
    margin: -84px 20px 0;
  }
  #about .group .group-txt .txt2 {
    width: auto;
    margin: 15px 0 0;
  }
}

#group-menu {
  position: relative;
}
#group-menu .img-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: 100vh;
}
#group-menu .img-sticky:nth-child(2):after {
  display: none;
}
#group-menu .group-sticky {
  position: sticky;
  top: 0;
  margin-bottom: 100vh;
}
#group-menu .group-sticky .img {
  height: 100vh;
}
#group-menu .group-sticky .img:after {
  display: none;
}
#group-menu .tit-sticky {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
#group-menu .tit-sticky img {
  width: 316px;
}
@media screen and (max-width: 767px) {
  #group-menu .tit-sticky img {
    width: 178px;
  }
}

#menu {
  position: relative;
  z-index: 1;
}
#menu .deco {
  position: absolute;
  width: 600px;
  max-width: 100%;
  top: 29px;
  left: 0;
}
@media screen and (max-width: 390px) {
  #menu .deco {
    top: -75px;
  }
}
#menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -99px;
  height: 100px;
  background: url("../img/index/bg_top.png") no-repeat bottom center/100% auto;
}
#menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -99px;
  height: 100px;
  background: url("../img/index/bg_bottom.png") no-repeat top center/100% auto;
}
#menu .group-item {
  padding: 94px 0 80px;
  position: relative;
  background: #FFD800;
  overflow: hidden;
}
@media screen and (max-width: 1280px) {
  #menu .group-item {
    padding: 43px 0 110px;
  }
}
@media screen and (max-width: 390px) {
  #menu .group-item {
    padding: 84.5px 0 110px;
  }
}
#menu .group-item .item {
  width: 706.5px;
  max-width: calc(100% - 60px);
  background: url("../img/index/bg_txt.png") no-repeat top center/100% 100%;
  position: relative;
  box-sizing: border-box;
  padding: 81px 0 103px;
  margin: 0 auto;
}
@media screen and (max-width: 1280px) {
  #menu .group-item .item {
    padding: 20px 0 80px;
  }
}
@media screen and (max-width: 390px) {
  #menu .group-item .item {
    max-width: 100%;
    width: 100%;
    padding: 66.5px 0 49px;
  }
}
#menu .group-item .item + .item {
  margin-top: 175px;
}
#menu .group-item .item .deco4 {
  position: absolute;
  width: 214px;
  top: 59.5px;
  left: calc(50% + 52.5px);
}
@media screen and (max-width: 1280px) {
  #menu .group-item .item .deco4 {
    left: calc(50% + 28px);
    top: -5.5px;
    width: 212.5px;
  }
}
@media screen and (max-width: 600px) {
  #menu .group-item .item .deco4 {
    width: 186.5px;
    top: -55.5px;
    left: auto;
    right: 30px;
  }
}
#menu .group-item .item .deco5 {
  position: absolute;
  width: 178.5px;
  top: 58px;
  left: calc(50% + 64px);
}
@media screen and (max-width: 1280px) {
  #menu .group-item .item .deco5 {
    left: calc(50% + 54px);
    top: 7px;
    width: 170.5px;
  }
}
@media screen and (max-width: 600px) {
  #menu .group-item .item .deco5 {
    top: -51px;
    left: auto;
    right: 30px;
    width: 192.5px;
  }
}
#menu .group-item .item .deco6 {
  position: absolute;
  width: 222.5px;
  top: 54.5px;
  left: calc(50% + 52px);
}
@media screen and (max-width: 1280px) {
  #menu .group-item .item .deco6 {
    left: calc(50% + 13.5px);
    top: -17.5px;
  }
}
@media screen and (max-width: 600px) {
  #menu .group-item .item .deco6 {
    right: 30px;
    left: auto;
    top: -57px;
    width: 217.5px;
  }
}
#menu .group-item .item .group-txt {
  width: 444px;
  margin: 0 auto 20px;
  max-width: calc(100% - 60px);
}
@media screen and (max-width: 390px) {
  #menu .group-item .item .group-txt {
    max-width: calc(100% - 70px);
    width: 100%;
    margin-bottom: 13px;
  }
}
#menu .group-item .item .group-txt h3 {
  font-size: 58px;
  line-height: 68px;
}
#menu .group-item .item .group-txt h3 span {
  display: inline-block;
}
#menu .group-item .item .group-txt h3 small {
  display: inline-block;
  margin-left: 3px;
  font-size: 34px;
}
@media screen and (max-width: 390px) {
  #menu .group-item .item .group-txt h3 {
    margin: 0 25px;
  }
}
#menu .group-item .item .group-txt .txt {
  margin: 8px 0 0;
  width: 280px;
  max-width: 100%;
}
#menu .group-item .item .img {
  width: 595.5px;
  margin: 0 auto;
  max-width: calc(100% - 60px);
}
@media screen and (max-width: 767px) {
  #menu .group-item .item .img {
    max-width: calc(100% - 94px);
  }
}
#menu .group-item .item .btn-link {
  position: absolute;
  z-index: 2;
  bottom: -43px;
  right: 3px;
}
@media screen and (max-width: 1280px) {
  #menu .group-item .item .btn-link {
    bottom: -100px;
    right: 30.5px;
  }
}
@media screen and (max-width: 390px) {
  #menu .group-item .item .btn-link {
    bottom: -103px;
    right: 20px;
  }
}
#menu .group-item .item .btn-link a {
  display: block;
  width: 144px;
  height: 144px;
  color: #FFD800;
  text-align: center;
  border-radius: 50%;
  padding: 61px 0 0;
  box-sizing: border-box;
  position: relative;
  text-decoration: none;
  line-height: 16px;
  background: #3E2C12;
  border: 1px solid #3E2C12;
  transition: all 0.3s;
}
#menu .group-item .item .btn-link a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px;
  background: url("../img/shared/arrow.png") no-repeat center/auto 100%;
  height: 8px;
}
#menu .group-item .item .btn-link a:hover {
  border: 1px solid #FFD800;
  background: #fff;
}

#photo {
  position: relative;
  padding: 278.5px 0 79px;
}
@media screen and (max-width: 767px) {
  #photo {
    padding: 210px 0 55px;
  }
}
#photo::before {
  content: "";
  position: absolute;
  right: 0;
  background: url("../img/index/deco_bg4.png") no-repeat top left/100% auto;
  width: 696.5px;
  height: 571.5px;
  top: -50.5px;
  max-width: 100%;
}
@media screen and (max-width: 390px) {
  #photo::before {
    top: -70px;
  }
}
#photo::after {
  content: "";
  position: absolute;
  right: 0;
  background: url("../img/index/deco_bg5.png") no-repeat top left/100% auto;
  width: 309px;
  height: 350px;
  max-width: 100%;
  top: 229px;
}
@media screen and (max-width: 390px) {
  #photo::after {
    top: 10px;
    width: 191px;
  }
}
#photo h2 {
  text-align: center;
  font-size: 46px;
  line-height: 54px;
  letter-spacing: 0;
  position: relative;
  z-index: 2;
}
#photo h2 span {
  display: inline-block;
}
#photo .tabs-switch {
  position: relative;
  z-index: 2;
  margin: 5px 0 0;
}
@media screen and (max-width: 767px) {
  #photo .tabs-switch {
    margin-bottom: 30px;
  }
}
#photo .tabs-switch .tab-link {
  display: flex;
  justify-content: center;
  margin: 0 0 15px;
}
#photo .tabs-switch .tab-link li {
  border-radius: 50%;
  text-align: center;
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 35px;
  cursor: pointer;
}
#photo .tabs-switch .tab-link li.active {
  background: #FFD800;
}
#photo .tabs-switch .tab-content {
  position: relative;
}
#photo .tabs-switch .tab-content .balloon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 727px;
  max-width: calc(100% - 60px);
}
@media screen and (max-width: 390px) {
  #photo .tabs-switch .tab-content .balloon {
    max-width: calc(100% - 30px);
  }
}
#photo .tabs-switch .tab-content .item.delay-01s {
  animation-delay: 0.1s !important;
}
#photo .tabs-switch .tab-content .item.delay-02s {
  animation-delay: 0.2s !important;
}
#photo .tabs-switch .tab-content .item.delay-03s {
  animation-delay: 0.3s !important;
}
#photo .tabs-switch .tab-content .tab {
  position: relative;
}
#photo .tabs-switch .tab-content .tab[style*="display: block;"] .flex .item {
  animation: bounce 0.5s ease;
}
#photo .tabs-switch .tab-content .map {
  width: 727px;
  margin: 0 auto;
  max-width: calc(100% - 60px);
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 390px) {
  #photo .tabs-switch .tab-content .map {
    max-width: calc(100% - 30px);
  }
}
#photo .tabs-switch .tab-content .flex {
  margin: 38px 20px 0;
  display: flex;
  justify-content: center;
  gap: 0 26px;
}
@media screen and (max-width: 999px) {
  #photo .tabs-switch .tab-content .flex {
    gap: 0 20px;
  }
}
@media screen and (max-width: 767px) {
  #photo .tabs-switch .tab-content .flex {
    flex-direction: column;
    gap: 15px 0;
    margin: 10px 15px 0;
  }
}
#photo .tabs-switch .tab-content .flex .item {
  width: 180px;
  font-size: 18px;
  line-height: 22px;
}
#photo .tabs-switch .tab-content .flex .item .tit {
  margin: 11px -10px 5px 0;
  letter-spacing: -0.05em;
}
@media screen and (max-width: 767px) {
  #photo .tabs-switch .tab-content .flex .item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #photo .tabs-switch .tab-content .flex .item .img {
    width: 120px;
  }
  #photo .tabs-switch .tab-content .flex .item .group-txt {
    width: calc(100% - 130px);
    font-size: 17px;
  }
  #photo .tabs-switch .tab-content .flex .item .group-txt .tit {
    margin: 0 -10px 5px 0;
  }
}

@keyframes clip-text {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@keyframes text-revealer {
  0%, 50% {
    transform-origin: 0 50%;
  }
  60%, 100% {
    transform-origin: 100% 50%;
  }
  60% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.openning {
  position: fixed;
  z-index: 999999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  transition: all 0.8s;
}
.openning.hide {
  opacity: 0;
  visibility: hidden;
}
.openning .img1 {
  animation-name: fadeIn;
  animation-duration: 1.5s;
  background-color: rgba(2, 1, 1, 0);
  animation-timing-function: ease;
  height: 100%;
  opacity: 0;
  animation-play-state: paused;
}
.openning .img3 {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  animation-play-state: paused;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0;
}
.openning .img2 {
  animation-name: flash;
  animation-duration: 0.4s;
  animation-delay: 1s;
  opacity: 0;
  animation-fill-mode: forwards;
  animation-play-state: paused;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.openning.run .img1, .openning.run .img2, .openning.run .img3 {
  animation-play-state: running;
}

.over {
  overflow: hidden;
  height: 100vh;
}
.over .openning ~ * {
  opacity: 0;
  visibility: hidden;
}
.over::before, .over:after {
  display: none;
}
.over main::before, .over main:after {
  display: none;
}

@keyframes flash {
  0%, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.flash {
  animation-name: flash;
}