@charset "UTF-8";
@import url("https://use.typekit.net/gcy2lyv.css");
#top {
  background-color: #fff;
}
#top .drawer-btn {
  mix-blend-mode: difference;
}
#top .drawer-btn .box .bar {
  border-bottom-color: #fff;
}
#top .sec .inr {
  margin-inline: auto;
}
#top .sec .inr.inr-width {
  max-width: 1728px;
  padding: 0 20px;
}
#top .sec.intro {
  overflow: hidden;
  padding-top: 175px;
}
@media (max-width: 767px) {
  #top .sec.intro {
    padding-top: 40px;
  }
}
#top .sec.feature {
  padding-bottom: 68px;
}
@media (max-width: 767px) {
  #top .sec.feature {
    padding-bottom: 0;
  }
}
#top .sec.news {
  padding-bottom: 143px;
}
@media (max-width: 767px) {
  #top .sec.news {
    padding-bottom: 60px;
  }
}
#top .sec.news .sec-head {
  padding-bottom: 40px;
}
@media (max-width: 767px) {
  #top .sec.news .sec-head {
    padding-bottom: 30px;
  }
}
#top .sec.access {
  padding-bottom: 80px;
}
@media (max-width: 767px) {
  #top .sec.access {
    padding-bottom: 60px;
  }
}
#top .sec.access .sec-head {
  padding-bottom: 40px;
}
@media (max-width: 767px) {
  #top .sec.access .sec-head {
    padding-bottom: 30px;
  }
}
#top .sec.map {
  padding-bottom: 120px;
}
@media (max-width: 767px) {
  #top .sec.map {
    padding-bottom: 60px;
  }
}
#top .sec.brand {
  padding: 116px 0px 100px;
}
@media (max-width: 767px) {
  #top .sec.brand {
    padding: 60px 0 100px;
  }
}
#top .sec.brand .inr.inr-width {
  max-width: 1290px;
}
#top .sec.brand .sec-heading {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
#top .sec.brand .sec-heading .common-title {
  padding-bottom: 40px;
}
#top .sec.brand .sec-heading .corp {
  padding-bottom: 25px;
}
#top .sec.brand .sec-heading .tx {
  font-size: 16px;
  letter-spacing: 0.03em;
  line-height: 2.3;
}
#top .sec.topNote {
  padding-bottom: 100px;
}
#top .sec.topNote .inr.inr-width {
  max-width: 1290px;
}
#top .bg-blackArea {
  background: #212121;
  padding-top: 120px;
  color: #fff;
  /* ▼ 初期状態（画面に入る前） */
  background-color: #fff;
  color: #333; /* テキストが見えなくなるのを防ぐため黒字に */
  padding-top: 120px;
  -webkit-transition: background-color 0.8s ease, color 0.8s ease;
  transition: background-color 0.8s ease, color 0.8s ease;
  /* エリア内の下線やタイトルの初期色も黒にしておく */
}
#top .bg-blackArea .sec-ttl .ttl span {
  border-bottom: 2px solid #333;
  -webkit-transition: border-color 0.8s ease;
  transition: border-color 0.8s ease;
}
#top .bg-blackArea .common-title .ja {
  color: #333;
  -webkit-transition: color 0.8s ease;
  transition: color 0.8s ease;
}
#top .bg-blackArea .news-link {
  border-bottom-color: #333;
  -webkit-transition: border-color 0.8s ease;
  transition: border-color 0.8s ease;
}
@media (max-width: 767px) {
  #top .bg-blackArea {
    padding-top: 70px;
  }
}
#top .bg-blackArea.is-active {
  background-color: #212121;
  color: #fff;
  /* 文字や線を白に反転させる */
}
#top .bg-blackArea.is-active .sec-ttl .ttl span {
  border-bottom-color: #fff;
}
#top .bg-blackArea.is-active .common-title .ja {
  color: #fff;
}
#top .bg-blackArea.is-active .news-link {
  border-bottom-color: #fff;
}

.mainVisual {
  overflow: hidden;
  aspect-ratio: 1920/1062;
  max-width: 1920px;
  margin-inline: auto;
  container-type: inline-size;
}
@media (max-width: 767px) {
  .mainVisual {
    aspect-ratio: auto;
  }
}
@media (max-width: 767px) {
  .mainVisual .img img {
    width: 100%;
  }
}

.mainVisual-allWrap {
  position: relative;
}
@media (max-width: 767px) {
  .mainVisual-allWrap {
    padding-bottom: 305px;
  }
}

.mv-ttl {
  position: absolute;
  top: 19.5833333333cqw;
  left: 4.1666666667%;
  width: 25.5208333333%;
}
@media (min-width: 768px) {
  .mv-ttl {
    max-width: 490px;
  }
}
@media (max-width: 767px) {
  .mv-ttl {
    width: 270px;
    top: 565px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.mv-ttl .ttl {
  margin-inline: auto;
  padding-bottom: 10.5%;
}
@media (max-width: 767px) {
  .mv-ttl .ttl {
    padding-bottom: 25px;
  }
}
.mv-ttl .sub-ttl {
  text-align: center;
  font-size: 2.0833333333cqw;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.1;
  font-weight: 700;
}
@media (max-width: 767px) {
  .mv-ttl .sub-ttl {
    font-size: 20px;
  }
}
.mv-ttl .sub-ttl.top {
  padding-bottom: 4%;
}
@media (max-width: 767px) {
  .mv-ttl .sub-ttl.top {
    padding-bottom: 7px;
  }
}

.indicator {
  position: absolute;
  /* top, left, width の数値はデザインカンプに合わせて調整してください */
  top: 37.7604166667cqw;
  left: 4.1666666667%;
  width: 23.4375%;
  height: 5px;
  background-color: #E6E6E6; /* 背景のグレー */
  border-radius: 1px;
  overflow: hidden;
  z-index: 4;
  opacity: 0;
  -webkit-transform: scale(0.85);
          transform: scale(0.85);
  -webkit-clip-path: inset(0 50% 0 50%);
  clip-path: inset(0 50% 0 50%);
}
@media (max-width: 767px) {
  .indicator {
    top: 710px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 270px;
    height: 2px;
  }
}

.scroll-tx {
  overflow: hidden;
  width: 100%;
  opacity: 0;
  -webkit-transform: scale(0.85);
          transform: scale(0.85);
}
.scroll-tx .tx {
  font-size: 7.8125cqw;
  letter-spacing: 0.03em;
  font-weight: 700;
  line-height: 1.1;
  color: #D8D8D8;
  display: inline-block;
  white-space: nowrap;
  margin: 0;
}
@media (max-width: 767px) {
  .scroll-tx .tx {
    font-size: 80px;
  }
}
.scroll-tx.always-anim {
  opacity: 1;
  -webkit-animation: emergeFromDepth 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
          animation: emergeFromDepth 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.scroll-inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-animation: loop-scroll 25s linear 1.75s infinite;
          animation: loop-scroll 25s linear 1.75s infinite;
}

@-webkit-keyframes loop-scroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

@keyframes loop-scroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.skew {
  max-width: 1294px;
  width: 58.4990958409%;
}
@media (max-width: 767px) {
  .skew {
    padding-top: 30px;
    width: 61%;
    max-width: 625px;
  }
}
.skew.sub {
  position: absolute;
  top: 4.0104166667cqw;
}
@media (min-width: 768px) {
  .skew.sub {
    right: 0;
  }
}
@media (max-width: 767px) {
  .skew.sub {
    top: 0;
    paddinG-top: 0;
    left: 345px;
  }
}
.skew .skew-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  z-index: 1;
  -webkit-transition: opacity 1.5s ease-in-out;
  transition: opacity 1.5s ease-in-out;
}
.skew .skew-img.is-active {
  opacity: 1;
  z-index: 2;
}

.skew-anim {
  overflow: hidden;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
}

.skew-visual {
  -webkit-clip-path: polygon(0% 0%, 65% 0%, 100% 100%, 35% 100%);
          clip-path: polygon(0% 0%, 65% 0%, 100% 100%, 35% 100%);
  width: 100%;
  height: 0;
  padding-top: 68.0740929876%;
  position: relative;
}
@media (max-width: 767px) {
  .skew-visual {
    padding-top: 75.75%;
    -webkit-clip-path: polygon(10% 0%, 61% 0%, 100% 100%, 49.5% 100%);
            clip-path: polygon(10% 0%, 61% 0%, 100% 100%, 49.5% 100%);
  }
}
.skew-visual::after, .skew-visual::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.skew-visual::before {
  background: #E8E7E8;
  z-index: 2;
}
.skew-visual::after {
  background: #F5F2F4;
  z-index: 3;
}

.skew-container {
  position: relative;
  width: 115.2083333333%;
  z-index: 3;
}
@media (min-width: 768px) {
  .skew-container {
    -webkit-transform: translateX(30%);
            transform: translateX(30%);
    padding-bottom: 9.4270833333%;
  }
}
@media (max-width: 767px) {
  .skew-container {
    width: 1025px;
    -webkit-transform: translateX(-95px);
            transform: translateX(-95px);
    overflow: hidden;
    padding-bottom: 23px;
  }
}

.skew-shape-item {
  position: absolute;
}
.skew-shape-item.shape01 {
  width: 23.191681736%;
  left: 5.424954792%;
}
@media (min-width: 768px) {
  .skew-shape-item.shape01 {
    bottom: -3px;
  }
}
@media (max-width: 767px) {
  .skew-shape-item.shape01 {
    left: 389px;
    top: 150px;
  }
}
.skew-shape-item.shape02 {
  width: 55.7414104882%;
  top: 0;
  left: 0;
}
@media (max-width: 767px) {
  .skew-shape-item.shape02 {
    width: 357px;
    height: 529px;
    left: 18px;
    top: 0;
  }
}

.scroll-txWrap {
  width: 100%;
}
.mainVisual .scroll-txWrap {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
}

.indicator-bar {
  width: 0%;
  height: 100%;
  background-color: #C3D013;
}

@media (max-width: 767px) {
  .skew-area {
    -webkit-transform: translateX(-60px);
            transform: translateX(-60px);
  }
}

.skew-imgBox .imgMask {
  position: relative;
}
.skew-imgBox .mask {
  -webkit-clip-path: polygon(0% 0%, 66% 0%, 100% 100%, 34% 100%);
          clip-path: polygon(0% 0%, 66% 0%, 100% 100%, 34% 100%);
  position: relative;
  z-index: 1;
}
.skew-imgBox .skew-img {
  position: absolute;
  z-index: 2;
}

.intro-cont {
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 100%;
}
@media (max-width: 1100px) {
  .intro-cont {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
    -webkit-justify-content: start;
        -ms-flex-pack: start;
            justify-content: start;
  }
}
.intro-cont .skew-imgBox {
  width: 957px;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  -webkit-transform: translateX(135px);
          transform: translateX(135px);
}
@media (max-width: 1600px) {
  .intro-cont .skew-imgBox {
    -webkit-transform: translateX(607.5px);
            transform: translateX(607.5px);
  }
}
@media (max-width: 1100px) {
  .intro-cont .skew-imgBox {
    -webkit-transform: translateX(40.6vw);
            transform: translateX(40.6vw);
    padding-bottom: 60px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
            flex-shrink: 1;
    width: 28.3vw;
  }
}
@media (max-width: 767px) {
  .intro-cont .skew-imgBox {
    padding-bottom: 30px;
    -webkit-transform: translateX(clamp(-157.56px, 94.63vw - 526.61px, 199.19px));
            transform: translateX(clamp(-157.56px, 94.63vw - 526.61px, 199.19px));
    width: 520px;
  }
}
.intro-cont .skew-imgBox .skew-img {
  width: 380px;
  top: 0;
  right: 49px;
}
@media (max-width: 1100px) {
  .intro-cont .skew-imgBox .skew-img {
    width: 28.3vw;
    right: 5.6vw;
  }
}
@media (max-width: 767px) {
  .intro-cont .skew-imgBox .skew-img {
    width: 53.33vw;
    min-width: 208px;
    right: 19px;
  }
}
.intro-cont .skew-imgBox .imgMask {
  width: 100%;
  padding: 67px 0 0 0;
}
@media (max-width: 1100px) {
  .intro-cont .skew-imgBox .imgMask {
    width: 74.58vw;
    margin-right: auto;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
  }
}
@media (max-width: 767px) {
  .intro-cont .skew-imgBox .imgMask {
    width: 133.33vw;
    min-width: 520px;
    padding: 36px 0 0 0;
  }
}
.intro-cont .bgArea {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 1057px;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  margin-right: 174px;
}
@media (max-width: 1600px) {
  .intro-cont .bgArea {
    width: 950px;
    margin-right: 276px;
  }
}
@media (max-width: 1100px) {
  .intro-cont .bgArea {
    margin-right: 0;
    width: 100%;
    display: block;
  }
}
@media (max-width: 1100px) {
  .intro-cont .bgArea {
    position: relative;
    padding-bottom: 350px;
  }
}
@media (max-width: 767px) {
  .intro-cont .bgArea {
    padding-bottom: 425px;
  }
}
.intro-cont .bgArea .bg {
  width: 664px;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  position: relative;
  z-index: 1;
}
@media (max-width: 1100px) {
  .intro-cont .bgArea .bg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 397px;
  }
}
@media (max-width: 767px) {
  .intro-cont .bgArea .bg {
    width: 82.05vw;
    min-width: 320px;
    max-width: 452px;
  }
}
.intro-cont .bgArea .sec-heading {
  position: relative;
  z-index: 2;
  width: 562px;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  -webkit-transform: translateX(165px);
          transform: translateX(165px);
  padding-top: 22px;
}
@media (max-width: 1600px) {
  .intro-cont .bgArea .sec-heading {
    -webkit-transform: translateX(500px);
            transform: translateX(500px);
  }
}
@media (max-width: 1100px) {
  .intro-cont .bgArea .sec-heading {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    padding: 0 30px;
  }
}

.about-modal {
  background-color: #000;
}
.about-modal .icon {
  width: 62px;
}
@media (max-width: 767px) {
  .about-modal .icon {
    width: 49px;
  }
}
.about-modal a {
  cursor: pointer;
}
.about-modal a.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}
@media (max-width: 767px) {
  .about-modal a.flex {
    gap: 0;
  }
}
.about-modal a.flex .icon {
  margin-bottom: 0;
}
.about-modal a .icon {
  margin-bottom: 15px;
}
@media (max-width: 767px) {
  .about-modal a .icon {
    margin-bottom: 7px;
  }
}
@media (min-width: 768px) {
  .about-modal a:hover {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
}
@media (max-width: 767px) {
  .about-modal ul li.park a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    gap: 5px;
  }
}
@media (max-width: 767px) {
  .about-modal ul li.park a .icon {
    margin-bottom: 0;
  }
}
.about-modal ul li.park .tx {
  width: 76px;
  width: 60px;
}
@media (max-width: 767px) {
  .about-modal ul li.aso a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
  }
}
.about-modal ul li.aso .tx {
  width: 121px;
}
@media (max-width: 767px) {
  .about-modal ul li.aso .tx {
    width: 100px;
  }
}
.about-modal ul li.air .tx {
  width: 64px;
}
@media (max-width: 767px) {
  .about-modal ul li.air .tx {
    width: 54px;
  }
}
@media (max-width: 767px) {
  .about-modal ul li.kumamoto a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: start;
        -ms-flex-align: start;
            align-items: start;
  }
}
.about-modal ul li.kumamoto .tx {
  width: 135px;
}
@media (max-width: 767px) {
  .about-modal ul li.kumamoto .tx {
    width: 105px;
  }
}

.about-modal {
  position: relative;
  aspect-ratio: 1920/1522;
}
@media (max-width: 767px) {
  .about-modal {
    aspect-ratio: 767/1007;
  }
}
.about-modal .link {
  position: absolute;
  inset: 0;
}
.about-modal .link ul {
  position: relative;
  width: 100%;
  height: 100%;
}
.about-modal .link ul li {
  position: absolute;
}
.about-modal .link ul li.park {
  top: 41.1300919842%;
  left: 38.8541666667%;
}
@media (max-width: 767px) {
  .about-modal .link ul li.park {
    /* 画面幅390px〜767pxの間で、182px〜355pxに変動する式 */
    top: clamp(182px, 182px + 173 * (100vw - 390px) / 377, 355px);
    /* 画面幅390px〜767pxの間で、19px〜110pxに変動する式 */
    left: clamp(19px, 19px + 91 * (100vw - 390px) / 377, 110px);
  }
}
.about-modal .link ul li.aso {
  top: 34.4283837057%;
  left: 72.1875%;
}
@media (max-width: 767px) {
  .about-modal .link ul li.aso {
    /* 画面幅390pxで130px、767pxで277pxになるように変動 */
    top: clamp(130px, 130px + 147 * (100vw - 390px) / 377, 277px);
    /* 画面幅390pxで269px、767pxで550pxになるように変動 */
    left: clamp(269px, 269px + 281 * (100vw - 390px) / 377, 550px);
  }
}
.about-modal .link ul li.air {
  top: 56.1760840999%;
  left: 60.625%;
}
@media (max-width: 767px) {
  .about-modal .link ul li.air {
    top: 53.5253227408%;
    left: 63.6245110821%;
  }
}
.about-modal .link ul li.kumamoto {
  top: 82.9172141919%;
  left: 13.9583333333%;
}
@media (max-width: 767px) {
  .about-modal .link ul li.kumamoto {
    /* 画面幅390pxで387px、767pxで758pxになるように変動 */
    top: clamp(387px, 387px + 371 * (100vw - 390px) / 377, 758px);
    /* 画面幅390pxで14px、767pxで57pxになるように変動 */
    left: clamp(14px, 14px + 43 * (100vw - 390px) / 377, 57px);
  }
}

.about-linkArea {
  position: relative;
}
@media (max-width: 1100px) {
  .about-linkArea {
    background-color: #212121;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
.about-linkArea .sec-heading {
  position: absolute;
  top: 5.3876478318%;
  left: 5.8854166667%;
  color: #fff;
}
@media (max-width: 1300px) {
  .about-linkArea .sec-heading {
    padding-bottom: 30px;
  }
}
@media (max-width: 1100px) {
  .about-linkArea .sec-heading {
    position: static;
    padding: 60px 30px;
  }
}
.about-linkArea .sec-heading .ttl span {
  border-color: #fff;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}
.modal .bg {
  position: absolute;
  inset: 0;
  z-index: 101;
}

.modal-item .box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 5.4%;
}
@media (max-width: 1200px) {
  .modal-item .box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.modal-item .tx {
  font-size: 16px;
  line-height: 2;
  color: #fff;
}
@media (max-width: 1000px) {
  .modal-item .tx {
    font-size: 14px;
  }
}
.modal-item .caption-cont {
  max-width: 850px;
  width: 57.8%;
}
@media (max-width: 1000px) {
  .modal-item .caption-cont {
    width: 100%;
  }
}
.modal-item .main {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-top: 50px;
}
@media (min-width: 768px) {
  .modal-item .main {
    min-width: 539px;
    padding-top: 30px;
  }
}
.modal-item .common-title {
  padding-bottom: 40px;
}
@media (max-width: 1000px) {
  .modal-item .common-title {
    padding-bottom: 30px;
  }
}
@media (max-width: 1000px) {
  .modal-item .common-title .ttl-img {
    width: 22px;
  }
}
@media (max-width: 1000px) {
  .modal-item .common-title .ja {
    font-size: 30px;
  }
}

.modal-swiper {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  max-width: 1469px;
  width: 85%;
  margin-inline: auto;
  z-index: 102;
}
@media (max-width: 1200px) {
  .modal-swiper {
    width: 87.6%;
  }
}
.modal-swiper .swiper {
  width: 100%;
  height: 100%;
}
@media (max-width: 1400px) {
  .modal-swiper .swiper {
    padding: 35px 0 100px 0;
  }
}
.modal-swiper .close-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 7px;
  padding: 5px 0;
  border: 1px solid #fff;
  width: 68px;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
}
.modal-swiper .close-btn .btn {
  margin-top: 3px;
  width: 8px;
  height: 8px;
  position: relative;
}
.modal-swiper .close-btn .btn .bar {
  position: absolute;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #fff;
  top: 50%;
  left: 50%;
}
.modal-swiper .close-btn .btn .bar:nth-child(1) {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
.modal-swiper .close-btn .btn .bar:nth-child(2) {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}
.modal-swiper .close-btn .close {
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1;
  color: #fff;
}
@media (min-width: 768px) {
  .modal-swiper .close-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
}

.modal-swiper-button {
  width: 200px;
  height: 100px;
  border: 1px solid #fff;
  position: absolute;
  bottom: 0;
  right: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 1400px) {
  .modal-swiper-button {
    width: 100px;
    height: 50px;
  }
}
.modal-swiper-button .swiper-button-prev,
.modal-swiper-button .swiper-button-next {
  width: 50%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: static;
  margin-top: 0;
}
.modal-swiper-button .swiper-button-prev .arrow,
.modal-swiper-button .swiper-button-next .arrow {
  width: 21px;
  height: 21px;
}
@media (max-width: 1400px) {
  .modal-swiper-button .swiper-button-prev .arrow,
  .modal-swiper-button .swiper-button-next .arrow {
    width: 15px;
    height: 15px;
  }
}
.modal-swiper-button .swiper-button-prev {
  border-right: 1px solid #fff;
}

.feature-cont .skew-img {
  bottom: 0;
}
.feature-cont.feature01 .imgMask {
  padding-bottom: 220px;
  width: 1419px;
}
@media (max-width: 1728px) {
  .feature-cont.feature01 .imgMask {
    width: clamp(446px, 82.7vw, 1419px);
  }
}
@media (max-width: 1100px) {
  .feature-cont.feature01 .imgMask {
    width: 93.53vw;
    padding-bottom: 76px;
  }
}
@media (max-width: 767px) {
  .feature-cont.feature01 .imgMask {
    margin-left: auto;
    width: 114.36vw;
    min-width: 446px;
  }
}
.feature-cont.feature01 .mask {
  -webkit-clip-path: polygon(0% 0%, 74% 0%, 100% 100%, 26% 100%);
          clip-path: polygon(0% 0%, 74% 0%, 100% 100%, 26% 100%);
}
.feature-cont.feature01 .skew-img {
  width: 416px;
  left: 140px;
}
@media (max-width: 1728px) {
  .feature-cont.feature01 .skew-img {
    width: clamp(136px, 24.07vw, 416px);
    bottom: auto;
    top: 26vw;
    left: 8.1vw;
  }
}
@media (max-width: 767px) {
  .feature-cont.feature01 .skew-img {
    top: clamp(135px, 34.62vw, 255px);
    left: clamp(45px, 11.54vw, 80px);
    width: 35.13vw;
    min-width: 137px;
  }
}
.feature-cont.feature02 .imgMask {
  padding-bottom: 130px;
  padding-right: 133px;
}
@media (max-width: 1728px) {
  .feature-cont.feature02 .imgMask {
    width: clamp(511px, 66.96vw, 1157px);
    padding-bottom: clamp(0px, 7.52vw, 130px);
    padding-right: clamp(0px, 7.7vw, 133px);
  }
}
@media (max-width: 1100px) {
  .feature-cont.feature02 .imgMask {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .feature-cont.feature02 .imgMask {
    width: 117.95vw;
    min-width: 460px;
    padding: 0 11.54vw 9.23vw 0;
    margin-right: auto;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
  }
}
.feature-cont.feature02 .mask {
  -webkit-clip-path: polygon(0% 0%, 72% 0%, 100% 100%, 28% 100%);
          clip-path: polygon(0% 0%, 72% 0%, 100% 100%, 28% 100%);
}
.feature-cont.feature02 .skew-img {
  width: 329px;
  right: 0;
}
@media (max-width: 1728px) {
  .feature-cont.feature02 .skew-img {
    width: clamp(137px, 19.04vw, 329px);
  }
}
@media (max-width: 1100px) {
  .feature-cont.feature02 .skew-img {
    width: 230px;
  }
}
@media (max-width: 767px) {
  .feature-cont.feature02 .skew-img {
    min-width: 137px;
    width: 35.13vw;
  }
}

.feature {
  overflow: hidden;
}
.feature .wrap {
  position: relative;
}
@media (max-width: 1100px) {
  .feature .wrap {
    margin-bottom: 60px;
  }
}
@media (max-width: 1100px) {
  .feature .wrap .sec-heading {
    padding: 0 30px;
  }
}
@media (max-width: 1100px) {
  .feature .wrap.feature-cont-01 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
.feature .wrap.feature-cont-01 .sec-head {
  position: absolute;
  left: 0;
  top: 140px;
  padding-left: 129px;
}
@media (max-width: 1100px) {
  .feature .wrap.feature-cont-01 .sec-head {
    padding-left: 0;
    position: static;
  }
}
.feature .wrap.feature-cont-01 .sec-body {
  padding-left: 547px;
}
@media (max-width: 1728px) {
  .feature .wrap.feature-cont-01 .sec-body {
    padding-left: 31.66vw;
  }
}
@media (max-width: 1100px) {
  .feature .wrap.feature-cont-01 .sec-body {
    padding-left: 6.66vw;
  }
}
@media (max-width: 767px) {
  .feature .wrap.feature-cont-01 .sec-body {
    padding-left: 7.66vw;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
  }
}
.feature .wrap.feature-cont-02 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  gap: 7px;
  padding-right: clamp(0px, 26.5625vw - 255px, 255px);
  -webkit-transform: translateX(-55px);
          transform: translateX(-55px);
  margin-top: -57px;
}
@media (max-width: 1728px) {
  .feature .wrap.feature-cont-02 {
    -webkit-transform: translateX(clamp(-230px, 639.5px - 50.318vw, 86px));
            transform: translateX(clamp(-230px, 639.5px - 50.318vw, 86px));
    padding-right: 0;
  }
}
@media (max-width: 1100px) {
  .feature .wrap.feature-cont-02 {
    margin-top: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
    gap: 30px;
  }
}
.feature .wrap.feature-cont-02 .sec-head {
  position: relative;
  z-index: 1;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
.feature .wrap.feature-cont-02 .sec-head .sec-heading {
  width: 550px;
}
@media (max-width: 1100px) {
  .feature .wrap.feature-cont-02 .sec-head .sec-heading {
    width: 100%;
  }
}
.feature .wrap.feature-cont-02 .sec-body {
  position: relative;
  z-index: 0;
  width: 1290px;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}
@media (max-width: 1728px) {
  .feature .wrap.feature-cont-02 .sec-body {
    width: clamp(0px, 67.65vw, 1290px);
    margin-right: auto;
  }
}
@media (max-width: 1100px) {
  .feature .wrap.feature-cont-02 .sec-body {
    width: 903px;
    -webkit-transform: translateX(-185px);
            transform: translateX(-185px);
  }
}
@media (max-width: 767px) {
  .feature .wrap.feature-cont-02 .sec-body {
    width: 100%;
    -webkit-transform: translateX(-26.92vw);
            transform: translateX(-26.92vw);
  }
}
.feature .wrap.feature-cont-02 .skew-btn {
  max-width: 245px;
  margin: 45px auto 0 17px;
}

.news-link {
  border-bottom: 1px solid #fff;
  display: block;
  position: relative;
  padding: 0 45px 18px 0;
}
@media (max-width: 767px) {
  .news-link {
    padding: 0 35px 16px 0;
  }
}
.news-link .time {
  font-size: 12px;
  letter-spacing: 0.03em;
  line-height: 1;
  padding-bottom: 12px;
}
.news-link .ttl {
  font-size: 14px;
  letter-spacing: 0.03em;
  line-height: 1.5;
}
.news-link .icon {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 7px;
  right: 20px;
}
@media (max-width: 767px) {
  .news-link .icon {
    top: 41px;
    right: 0;
  }
}
@media (min-width: 768px) {
  .news-link:hover {
    opacity: 0.7;
  }
}

.news-list ul li:nth-child(n+2) {
  margin-top: 25px;
}

.access-intro {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-bottom: 80px;
}
@media (max-width: 767px) {
  .access-intro {
    padding-bottom: 30px;
  }
}
.access-intro .subTll {
  font-size: 25px;
  line-height: 1;
  letter-spacing: 0.03em;
  padding-bottom: 25px;
}
@media (max-width: 767px) {
  .access-intro .subTll {
    line-height: 1.5;
    font-size: 20px;
    padding-bottom: 15px;
  }
}
.access-intro .lead {
  font-size: 16px;
  line-height: 2.3;
  letter-spacing: 0.03em;
  padding-bottom: 80px;
}
@media (max-width: 767px) {
  .access-intro .lead {
    font-size: 14px;
    line-height: 2;
    padding-bottom: 30px;
  }
}
@media (min-width: 768px) {
  .access-intro .main {
    width: 880px;
  }
}
.access-intro .main {
  padding-bottom: 30px;
}
@media (min-width: 768px) {
  .access-intro .imgBox {
    width: 440px;
  }
}
.access-intro .imgBox {
  position: relative;
}
.access-intro .imgBox img {
  width: 100%;
}
.access-intro .imgBox .time {
  position: absolute;
  top: 13px;
  left: 0;
  background: -webkit-linear-gradient(315deg, #005432 0%, #C3D013 100%);
  background: linear-gradient(135deg, #005432 0%, #C3D013 100%);
  padding: 5px 30px 5px 18px;
  -webkit-clip-path: polygon(0% 0%, 85% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 85% 0%, 100% 100%, 0% 100%);
}
.access-intro .imgBox .time .common {
  letter-spacing: 0.03em;
  line-height: 1;
}
.access-intro .imgBox .time .md {
  font-size: 20px;
}
.access-intro .imgBox .time .lg {
  font-size: 40px;
  padding: 0 5px;
}
.access-intro .imgBox .caption {
  position: absolute;
  bottom: 2px;
  right: 0;
}
.access-intro .img-list ul li:nth-child(n+2) {
  margin-top: 14px;
}

.access-point {
  color: #333;
  padding: 80px 120px;
}
@media (max-width: 1100px) {
  .access-point {
    padding: 30px 20px;
  }
}
.access-point .body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 6.5%;
}
@media (max-width: 1000px) {
  .access-point .body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.access-point.yellow {
  background-color: #FDFFE5;
}
.access-point.yellow .caption {
  padding: 10px 0 0 0;
}
@media (max-width: 767px) {
  .access-point.yellow .caption {
    padding: 7px 0 0 0;
    line-height: 1.25;
  }
}
.access-point.blue {
  background-color: #E0EFEA;
}
.access-point.blue .caption {
  bottom: 3px;
  right: 0;
}
.access-point .main {
  width: 63.4%;
}
@media (max-width: 1000px) {
  .access-point .main {
    padding-bottom: 30px;
    width: 100%;
  }
}
.access-point .imgBox {
  width: 30.1%;
  position: relative;
}
@media (min-width: 768px) {
  .access-point .imgBox {
    min-width: 370px;
  }
}
@media (max-width: 1000px) {
  .access-point .imgBox {
    width: 100%;
    max-width: 290px;
  }
}
.access-point .ttl {
  letter-spacing: 0.03em;
  font-size: 42px;
  line-height: 1;
  margin-bottom: 60px;
  font-weight: 700;
  display: inline-block;
}
@media (max-width: 1100px) {
  .access-point .ttl {
    font-size: 30px;
    margin-bottom: 25px;
  }
}
@media (max-width: 767px) {
  .access-point .ttl {
    font-size: 25px;
  }
}
.access-point .ttl span {
  padding-bottom: 2px;
  display: inline-block;
  border-bottom: 2px solid #333;
  line-height: 1.3;
}
@media (max-width: 767px) {
  .access-point .ttl span {
    margin-bottom: 15px;
  }
}
.access-point .subTtl {
  font-size: 25px;
  letter-spacing: 0.03em;
  line-height: 1;
  font-weight: 700;
  padding-bottom: 25px;
}
@media (max-width: 1000px) {
  .access-point .subTtl {
    line-height: 1.5;
  }
}
@media (max-width: 767px) {
  .access-point .subTtl {
    font-size: 20px;
    padding-bottom: 15px;
  }
}
.access-point .lead {
  font-size: 16px;
  letter-spacing: 0.03em;
  line-height: 2.3;
}
@media (max-width: 767px) {
  .access-point .lead {
    font-size: 14px;
    line-height: 2;
  }
}

.access-point-list ul li:nth-child(n+2) {
  margin-top: 80px;
}
@media (max-width: 767px) {
  .access-point-list ul li:nth-child(n+2) {
    margin-top: 30px;
  }
}

.map-heading {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 50px;
  padding-bottom: 40px;
}
@media (max-width: 900px) {
  .map-heading {
    gap: 30px;
    padding-bottom: 30px;
  }
}
.map-heading .logo {
  width: 320px;
}
.map-heading .address {
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1;
}
.map-heading .google-logo {
  width: 115px;
}

.googleMap {
  overflow: hidden;
  aspect-ratio: 1920/1000;
}
.googleMap .iframe {
  width: 100%;
  height: 100%;
}
.googleMap.sp {
  display: none;
}
@media (max-width: 1100px) {
  .googleMap.sp {
    display: block;
    height: 315px;
    aspect-ratio: auto;
  }
}
.googleMap iframe {
  width: 100%;
  height: 100%;
}

.brand-img {
  max-width: 450px;
  margin-inline: auto;
  padding: 80px 0;
}
@media (max-width: 767px) {
  .brand-img {
    padding: 30px 0;
    max-width: 330px;
  }
}

.facility-item .img {
  margin-bottom: 15px;
}
@media (max-width: 767px) {
  .facility-item .img {
    margin-bottom: 13px;
  }
}
.facility-item .ttl {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.facility-item .ttl .tag {
  font-size: 12px;
  letter-spacing: 0.03em;
  color: #005432;
}
.facility-item .common-title .ttl-img {
  width: 14px;
}
.facility-item .common-title .ja {
  font-size: 16px;
  letter-spacing: 0.03em;
}

.facility-list ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 37.5px;
}
@media (max-width: 900px) {
  .facility-list ul {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 20px;
  }
}
.facility-list ul li {
  width: 385px;
}
@media (max-width: 767px) {
  .facility-list ul li {
    max-width: 100%;
  }
}

.history-item .tx {
  padding: 0 10px 0 26px;
  border-left: 1px solid #333;
  font-size: 16px;
  letter-spacing: 0.03em;
  line-height: 2;
}

.history-list ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
@media (max-width: 767px) {
  .history-list ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.history-list ul li {
  width: 50%;
}
.history-list ul li:nth-child(n+3) {
  margin-top: 35px;
}
@media (max-width: 767px) {
  .history-list ul li {
    width: 100%;
  }
  .history-list ul li:nth-child(n+2) {
    margin-top: 15px;
  }
}

.reveal-wrap {
  display: inline-block;
  position: relative;
  padding-right: 15px;
}

.reveal-content {
  display: inline-block;
  opacity: 0;
}

.reveal-skew {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-color: #212121;
  -webkit-transform: skew(25deg) scaleX(0);
          transform: skew(25deg) scaleX(0);
  -webkit-transform-origin: left;
          transform-origin: left;
}

.reveal-wrap.sub .reveal-content {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.reveal-wrap.sub .reveal-skew {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

@-webkit-keyframes textReveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes textReveal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes blockReveal {
  0% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: skew(25deg) scaleX(0);
            transform: skew(25deg) scaleX(0);
  }
  40% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: skew(25deg) scaleX(1);
            transform: skew(25deg) scaleX(1);
  }
  40.1% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: skew(25deg) scaleX(1);
            transform: skew(25deg) scaleX(1);
  }
  100% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: skew(25deg) scaleX(0);
            transform: skew(25deg) scaleX(0);
  }
}
@keyframes blockReveal {
  0% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: skew(25deg) scaleX(0);
            transform: skew(25deg) scaleX(0);
  }
  40% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: skew(25deg) scaleX(1);
            transform: skew(25deg) scaleX(1);
  }
  40.1% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: skew(25deg) scaleX(1);
            transform: skew(25deg) scaleX(1);
  }
  100% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: skew(25deg) scaleX(0);
            transform: skew(25deg) scaleX(0);
  }
}
.skew-shape-item.shape01 {
  opacity: 0;
}

@-webkit-keyframes revealDropFromTopLeft {
  0% {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
    -webkit-transform: translate(-60px, -60px);
            transform: translate(-60px, -60px);
    opacity: 0;
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes revealDropFromTopLeft {
  0% {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
    -webkit-transform: translate(-60px, -60px);
            transform: translate(-60px, -60px);
    opacity: 0;
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
}
.skew-shape-item.shape02 {
  opacity: 0;
}

@-webkit-keyframes revealDrop {
  0% {
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@keyframes revealDrop {
  0% {
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@-webkit-keyframes revealDropFromTopRight {
  0% {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
    -webkit-transform: translate(100px, -100px);
            transform: translate(100px, -100px);
    opacity: 0;
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes revealDropFromTopRight {
  0% {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
    -webkit-transform: translate(100px, -100px);
            transform: translate(100px, -100px);
    opacity: 0;
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes emergeFromDepth {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes emergeFromDepth {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.mainVisual.is-loaded .reveal-skew {
  -webkit-animation: blockReveal 1s cubic-bezier(0.77, 0, 0.175, 1) 0.2s forwards;
          animation: blockReveal 1s cubic-bezier(0.77, 0, 0.175, 1) 0.2s forwards;
}
.mainVisual.is-loaded .skew-anim {
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  -webkit-animation: animStep1 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
          animation: animStep1 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.mainVisual.is-loaded .skew-visual::after {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
  -webkit-animation: animStep2 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards;
          animation: animStep2 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards;
}
.mainVisual.is-loaded .skew-visual::before {
  opacity: 1;
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
  -webkit-animation: animStep3 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.3s forwards;
          animation: animStep3 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.3s forwards;
}
.mainVisual.is-loaded .skew-img:nth-child(1) {
  -webkit-animation: animStep4 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.3s backwards;
          animation: animStep4 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.3s backwards;
}
.mainVisual.is-loaded .scroll-tx {
  opacity: 0;
  -webkit-animation: emergeFromDepth 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
          animation: emergeFromDepth 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.mainVisual.is-loaded .indicator {
  opacity: 0;
  -webkit-animation: emergeThenExpand 3.2s forwards;
          animation: emergeThenExpand 3.2s forwards;
}
@media (max-width: 767px) {
  .mainVisual.is-loaded .indicator {
    -webkit-animation: emergeThenExpand-sp 3.2s forwards;
            animation: emergeThenExpand-sp 3.2s forwards;
  }
}
.mainVisual.is-loaded .skew-shape-item.shape01 {
  -webkit-animation: revealDrop 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
          animation: revealDrop 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}
.mainVisual.is-loaded .skew-shape-item.shape02 {
  -webkit-animation: revealDropFromTopRight 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
          animation: revealDropFromTopRight 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.mainVisual.is-loaded .reveal-content {
  -webkit-animation: textReveal 0.1s 0.6s forwards;
          animation: textReveal 0.1s 0.6s forwards;
}

@-webkit-keyframes animStep1 {
  0% {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}

@keyframes animStep1 {
  0% {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@-webkit-keyframes animStep2 {
  0% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  100% {
    -webkit-clip-path: inset(100% 0 0 0);
            clip-path: inset(100% 0 0 0);
  }
}
@keyframes animStep2 {
  0% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  100% {
    -webkit-clip-path: inset(100% 0 0 0);
            clip-path: inset(100% 0 0 0);
  }
}
@-webkit-keyframes animStep3 {
  0% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  100% {
    -webkit-clip-path: inset(100% 0 0 0);
            clip-path: inset(100% 0 0 0);
  }
}
@keyframes animStep3 {
  0% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  100% {
    -webkit-clip-path: inset(100% 0 0 0);
            clip-path: inset(100% 0 0 0);
  }
}
@-webkit-keyframes animStep4 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes animStep4 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes emergeThenExpand {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
    -webkit-clip-path: inset(0 50% 0 50%);
            clip-path: inset(0 50% 0 50%);
    -webkit-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
            animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  53% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-clip-path: inset(0 50% 0 50%);
            clip-path: inset(0 50% 0 50%);
    -webkit-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
            animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@keyframes emergeThenExpand {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
    -webkit-clip-path: inset(0 50% 0 50%);
            clip-path: inset(0 50% 0 50%);
    -webkit-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
            animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  53% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-clip-path: inset(0 50% 0 50%);
            clip-path: inset(0 50% 0 50%);
    -webkit-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
            animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@-webkit-keyframes emergeThenExpand-sp {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50%) scale(0.85);
            transform: translateX(-50%) scale(0.85);
    -webkit-clip-path: inset(0 50% 0 50%);
            clip-path: inset(0 50% 0 50%);
    -webkit-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
            animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  53% {
    opacity: 1;
    -webkit-transform: translateX(-50%) scale(1);
            transform: translateX(-50%) scale(1);
    -webkit-clip-path: inset(0 50% 0 50%);
            clip-path: inset(0 50% 0 50%);
    -webkit-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
            animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(-50%) scale(1);
            transform: translateX(-50%) scale(1);
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@keyframes emergeThenExpand-sp {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50%) scale(0.85);
            transform: translateX(-50%) scale(0.85);
    -webkit-clip-path: inset(0 50% 0 50%);
            clip-path: inset(0 50% 0 50%);
    -webkit-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
            animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  53% {
    opacity: 1;
    -webkit-transform: translateX(-50%) scale(1);
            transform: translateX(-50%) scale(1);
    -webkit-clip-path: inset(0 50% 0 50%);
            clip-path: inset(0 50% 0 50%);
    -webkit-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
            animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(-50%) scale(1);
            transform: translateX(-50%) scale(1);
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@-webkit-keyframes fluffy {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
@keyframes fluffy {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}
.about-modal ul li a .icon {
  -webkit-animation: fluffy 3s infinite;
          animation: fluffy 3s infinite;
}