@charset "UTF-8";
@-ms-viewport {
  width: device-width;
}
/*--------------------------------------------------------------------------
CSS　カスタム設定(top-style.css)ver.1 2026.04.16
--------------------------------------------------------------------------*/
/*■■■■■■ 基本設定 ■■■■■■■*/
/*FLAG 青緑　濃い*/
/*FLAG 青緑　薄い*/
/*FLAG 緑　*/
/*■　共有設定　■*/
.text-left {
  text-align: left;
}

/*■■■■■■　#0 ムービー　■■■■■■■*/
/* ========================================
FV VIDEO
======================================== */
.top-fv {
  margin: 80px auto 0;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  overflow: hidden;
  -webkit-mask-image: url("../images/crip-wave-bottom_16-9.svg");
  mask-image: url("../images/crip-wave-bottom_16-9.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: top;
  mask-position: top;
}

/* 共通 */
.top-fv-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
  background: #000;
}

/* PC */
.top-fv-video-pc {
  display: block;
}

/* SP */
.top-fv-video-sp {
  display: none;
}

/* ========================================
SP
======================================== */
@media screen and (max-width: 767px) {
  /* PC動画を非表示 */
  .top-fv-video-pc {
    display: none;
  }
  /* SP動画を表示 */
  .top-fv-video-sp {
    display: block;
  }
}
/* ========================================
初回FV再生中
======================================== */
/* ヘッダー隠す */
body.fv-intro-playing #header {
  -webkit-transform: translateY(-200%);
          transform: translateY(-200%);
}

/* PCのみ margin を消す */
@media screen and (min-width: 1024px) {
  body.fv-intro-playing .top-fv {
    margin-top: 0;
    height: auto;
    aspect-ratio: 16/9;
  }
}
/*■■■■■■　#1 ウェルカム　■■■■■■■*/
.top-welcome {
  margin: 0 auto;
  padding: 2em 0 8em;
  background-color: #e6f1f2;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF), color-stop(10%, #e6f1f2), color-stop(80%, #e6f1f2), to(#FFF));
  background: linear-gradient(to bottom, #FFF 0, #e6f1f2 10%, #e6f1f2 80%, #FFF 100%);
  position: relative;
  overflow: hidden;
}

/*トップタイトル*/
.top-text-s {
  font-family: "Noto Serif JP", serif;
  font-size: 4rem;
  line-height: 1.4;
  font-weight: 600;
}
.top-text-s span {
  margin-right: -1rem;
}

.top-catch-img {
  margin: 1em auto 2em;
  width: 100%;
  max-width: 600px;
}

.top-catch-block {
  margin: 0 0 4em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}

.top-catch-l {
  margin: 0 auto;
  padding: 5px 15px;
  background-color: #fff;
  color: #007481;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: "Noto Serif JP", serif;
  font-size: 4rem;
  line-height: 1.2;
  font-weight: 500;
}
.top-catch-l span {
  margin: 0 -15px 0 -10px;
}
.top-catch-l sup {
  margin-top: -1rem;
  font-size: 1.3rem;
}

.top-catch-m {
  margin: 0 auto;
  padding: 5px 20px;
  background-color: #fff;
  color: #007481;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: "Noto Serif JP", serif;
  font-size: 2.6rem;
  line-height: 1.2;
  font-weight: 500;
}

/*■　リンクボタン　■*/
.top-btn-box {
  margin: 4em 0 40px;
}

a.link-btn-gra {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 5px;
  width: 320px;
  height: 52px;
  border-radius: 26px;
  background: -webkit-gradient(linear, left top, right top, from(#4d8cbe), to(#54b77f));
  background: linear-gradient(to right, #4d8cbe, #54b77f);
  color: #FFF;
  font-size: 1.5rem;
  font-weight: 500;
}
a.link-btn-gra:after {
  content: "";
  display: block;
  width: 26px;
  height: 16px;
  background: url(../images/top/btn-arrow.svg) center center no-repeat;
  background-size: cover;
}
a.link-btn-gra:link, a.link-btn-gra:visited, a.link-btn-gra:hover, a.link-btn-gra:active {
  color: #FFF;
}

a.link-btn-gra {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 5px;
  width: 320px;
  height: 52px;
  border-radius: 26px;
  /* グラデーション */
  background: -webkit-gradient(linear, left top, right top, from(#4d8cbe), color-stop(45%, #4d8cbe), color-stop(55%, #54b77f), to(#54b77f));
  background: linear-gradient(90deg, #4d8cbe 0%, #4d8cbe 45%, #54b77f 55%, #54b77f 100%);
  /* ←ここ重要 */
  background-size: 200% 100%;
  background-position: 50% 0;
  color: #FFF;
  font-size: 1.5rem;
  font-weight: 500;
  -webkit-transition: background-position 0.6s ease;
  transition: background-position 0.6s ease;
}
a.link-btn-gra:after {
  content: "";
  display: block;
  width: 26px;
  height: 16px;
  background: url(../images/top/btn-arrow.svg) center center no-repeat;
  background-size: cover;
  /* 矢印も少し動かすと気持ちいい */
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}
a.link-btn-gra:hover {
  /* 境目が左へ流れる */
  background-position: 100% 0;
}
a.link-btn-gra:hover:after {
  -webkit-transform: translateX(4px);
          transform: translateX(4px);
}
a.link-btn-gra:link, a.link-btn-gra:visited, a.link-btn-gra:hover, a.link-btn-gra:active {
  color: #FFF;
}

.text-foot-note {
  margin: 0 auto;
  display: inline-block;
  font-size: 1rem;
  text-align: left;
}

/*■■■ アメーバオブジェクト ■■■*/
.bg-obj {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  opacity: 0.5;
}

.bg-obj img {
  display: block;
  width: 100%;
  height: auto;
}

.bg-obj-1 {
  top: 10%;
  left: -60px;
  width: 400px;
  -webkit-animation: floatA 18s ease-in-out infinite alternate;
          animation: floatA 18s ease-in-out infinite alternate;
  -webkit-animation-duration: 18s;
          animation-duration: 18s;
}

.bg-obj-2 {
  top: 15%;
  right: -60px;
  width: 400px;
  -webkit-animation: floatB 22s ease-in-out infinite alternate;
          animation: floatB 22s ease-in-out infinite alternate;
  -webkit-animation-duration: 24s;
          animation-duration: 24s;
}

.bg-obj-3 {
  bottom: -10px;
  left: -10px;
  width: 300px;
  -webkit-animation: floatC 20s ease-in-out infinite alternate;
          animation: floatC 20s ease-in-out infinite alternate;
  -webkit-animation-duration: 22s;
          animation-duration: 22s;
}

.bg-obj-4 {
  bottom: 20%;
  right: -60px;
  width: 300px;
  -webkit-animation: floatD 24s ease-in-out infinite alternate;
          animation: floatD 24s ease-in-out infinite alternate;
  -webkit-animation-duration: 16s;
          animation-duration: 16s;
}

/* =========================
A
========================= */
@-webkit-keyframes floatA {
  0% {
    -webkit-transform: scale(1) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
            transform: scale(1) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
  }
  25% {
    -webkit-transform: scale(1.08) scaleX(1.04) scaleY(0.96) rotate(2deg) translate(10px, -8px);
            transform: scale(1.08) scaleX(1.04) scaleY(0.96) rotate(2deg) translate(10px, -8px);
  }
  50% {
    -webkit-transform: scale(0.96) scaleX(0.92) scaleY(1.08) rotate(-2deg) translate(-8px, 6px);
            transform: scale(0.96) scaleX(0.92) scaleY(1.08) rotate(-2deg) translate(-8px, 6px);
  }
  75% {
    -webkit-transform: scale(1.06) scaleX(1.08) scaleY(0.92) rotate(1deg) translate(6px, -4px);
            transform: scale(1.06) scaleX(1.08) scaleY(0.92) rotate(1deg) translate(6px, -4px);
  }
  100% {
    -webkit-transform: scale(1) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
            transform: scale(1) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
  }
}
@keyframes floatA {
  0% {
    -webkit-transform: scale(1) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
            transform: scale(1) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
  }
  25% {
    -webkit-transform: scale(1.08) scaleX(1.04) scaleY(0.96) rotate(2deg) translate(10px, -8px);
            transform: scale(1.08) scaleX(1.04) scaleY(0.96) rotate(2deg) translate(10px, -8px);
  }
  50% {
    -webkit-transform: scale(0.96) scaleX(0.92) scaleY(1.08) rotate(-2deg) translate(-8px, 6px);
            transform: scale(0.96) scaleX(0.92) scaleY(1.08) rotate(-2deg) translate(-8px, 6px);
  }
  75% {
    -webkit-transform: scale(1.06) scaleX(1.08) scaleY(0.92) rotate(1deg) translate(6px, -4px);
            transform: scale(1.06) scaleX(1.08) scaleY(0.92) rotate(1deg) translate(6px, -4px);
  }
  100% {
    -webkit-transform: scale(1) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
            transform: scale(1) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
  }
}
/* =========================
B
========================= */
@-webkit-keyframes floatB {
  0% {
    -webkit-transform: scale(0.98) scaleX(1.1) scaleY(0.98) rotate(-1deg) translate(0, 0);
            transform: scale(0.98) scaleX(1.1) scaleY(0.98) rotate(-1deg) translate(0, 0);
  }
  20% {
    -webkit-transform: scale(1.05) scaleX(0.94) scaleY(1.08) rotate(2deg) translate(-12px, 8px);
            transform: scale(1.05) scaleX(0.94) scaleY(1.08) rotate(2deg) translate(-12px, 8px);
  }
  45% {
    -webkit-transform: scale(0.94) scaleX(1.08) scaleY(0.9) rotate(-3deg) translate(8px, -10px);
            transform: scale(0.94) scaleX(1.08) scaleY(0.9) rotate(-3deg) translate(8px, -10px);
  }
  70% {
    -webkit-transform: scale(1.07) scaleX(1.02) scaleY(0.96) rotate(1deg) translate(-6px, 4px);
            transform: scale(1.07) scaleX(1.02) scaleY(0.96) rotate(1deg) translate(-6px, 4px);
  }
  100% {
    -webkit-transform: scale(0.98) scaleX(1.02) scaleY(0.98) rotate(-1deg) translate(0, 0);
            transform: scale(0.98) scaleX(1.02) scaleY(0.98) rotate(-1deg) translate(0, 0);
  }
}
@keyframes floatB {
  0% {
    -webkit-transform: scale(0.98) scaleX(1.1) scaleY(0.98) rotate(-1deg) translate(0, 0);
            transform: scale(0.98) scaleX(1.1) scaleY(0.98) rotate(-1deg) translate(0, 0);
  }
  20% {
    -webkit-transform: scale(1.05) scaleX(0.94) scaleY(1.08) rotate(2deg) translate(-12px, 8px);
            transform: scale(1.05) scaleX(0.94) scaleY(1.08) rotate(2deg) translate(-12px, 8px);
  }
  45% {
    -webkit-transform: scale(0.94) scaleX(1.08) scaleY(0.9) rotate(-3deg) translate(8px, -10px);
            transform: scale(0.94) scaleX(1.08) scaleY(0.9) rotate(-3deg) translate(8px, -10px);
  }
  70% {
    -webkit-transform: scale(1.07) scaleX(1.02) scaleY(0.96) rotate(1deg) translate(-6px, 4px);
            transform: scale(1.07) scaleX(1.02) scaleY(0.96) rotate(1deg) translate(-6px, 4px);
  }
  100% {
    -webkit-transform: scale(0.98) scaleX(1.02) scaleY(0.98) rotate(-1deg) translate(0, 0);
            transform: scale(0.98) scaleX(1.02) scaleY(0.98) rotate(-1deg) translate(0, 0);
  }
}
/* =========================
C
========================= */
@-webkit-keyframes floatC {
  0% {
    -webkit-transform: scale(1) scaleX(0.96) scaleY(1.04) rotate(1deg) translate(0, 0);
            transform: scale(1) scaleX(0.96) scaleY(1.04) rotate(1deg) translate(0, 0);
  }
  30% {
    -webkit-transform: scale(1.1) scaleX(1.1) scaleY(0.9) rotate(-2deg) translate(14px, -6px);
            transform: scale(1.1) scaleX(1.1) scaleY(0.9) rotate(-2deg) translate(14px, -6px);
  }
  55% {
    -webkit-transform: scale(0.92) scaleX(0.88) scaleY(1.12) rotate(3deg) translate(-10px, 10px);
            transform: scale(0.92) scaleX(0.88) scaleY(1.12) rotate(3deg) translate(-10px, 10px);
  }
  80% {
    -webkit-transform: scale(1.03) scaleX(1.06) scaleY(0.95) rotate(-1deg) translate(4px, -8px);
            transform: scale(1.03) scaleX(1.06) scaleY(0.95) rotate(-1deg) translate(4px, -8px);
  }
  100% {
    -webkit-transform: scale(1) scaleX(0.96) scaleY(1.04) rotate(1deg) translate(0, 0);
            transform: scale(1) scaleX(0.96) scaleY(1.04) rotate(1deg) translate(0, 0);
  }
}
@keyframes floatC {
  0% {
    -webkit-transform: scale(1) scaleX(0.96) scaleY(1.04) rotate(1deg) translate(0, 0);
            transform: scale(1) scaleX(0.96) scaleY(1.04) rotate(1deg) translate(0, 0);
  }
  30% {
    -webkit-transform: scale(1.1) scaleX(1.1) scaleY(0.9) rotate(-2deg) translate(14px, -6px);
            transform: scale(1.1) scaleX(1.1) scaleY(0.9) rotate(-2deg) translate(14px, -6px);
  }
  55% {
    -webkit-transform: scale(0.92) scaleX(0.88) scaleY(1.12) rotate(3deg) translate(-10px, 10px);
            transform: scale(0.92) scaleX(0.88) scaleY(1.12) rotate(3deg) translate(-10px, 10px);
  }
  80% {
    -webkit-transform: scale(1.03) scaleX(1.06) scaleY(0.95) rotate(-1deg) translate(4px, -8px);
            transform: scale(1.03) scaleX(1.06) scaleY(0.95) rotate(-1deg) translate(4px, -8px);
  }
  100% {
    -webkit-transform: scale(1) scaleX(0.96) scaleY(1.04) rotate(1deg) translate(0, 0);
            transform: scale(1) scaleX(0.96) scaleY(1.04) rotate(1deg) translate(0, 0);
  }
}
/* =========================
D
========================= */
@-webkit-keyframes floatD {
  0% {
    -webkit-transform: scale(1.02) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
            transform: scale(1.02) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
  }
  22% {
    -webkit-transform: scale(0.95) scaleX(1.12) scaleY(0.88) rotate(2deg) translate(10px, 12px);
            transform: scale(0.95) scaleX(1.12) scaleY(0.88) rotate(2deg) translate(10px, 12px);
  }
  48% {
    -webkit-transform: scale(1.08) scaleX(0.92) scaleY(1.1) rotate(-2deg) translate(-12px, -6px);
            transform: scale(1.08) scaleX(0.92) scaleY(1.1) rotate(-2deg) translate(-12px, -6px);
  }
  74% {
    -webkit-transform: scale(0.97) scaleX(1.04) scaleY(0.96) rotate(1deg) translate(6px, 4px);
            transform: scale(0.97) scaleX(1.04) scaleY(0.96) rotate(1deg) translate(6px, 4px);
  }
  100% {
    -webkit-transform: scale(1.02) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
            transform: scale(1.02) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
  }
}
@keyframes floatD {
  0% {
    -webkit-transform: scale(1.02) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
            transform: scale(1.02) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
  }
  22% {
    -webkit-transform: scale(0.95) scaleX(1.12) scaleY(0.88) rotate(2deg) translate(10px, 12px);
            transform: scale(0.95) scaleX(1.12) scaleY(0.88) rotate(2deg) translate(10px, 12px);
  }
  48% {
    -webkit-transform: scale(1.08) scaleX(0.92) scaleY(1.1) rotate(-2deg) translate(-12px, -6px);
            transform: scale(1.08) scaleX(0.92) scaleY(1.1) rotate(-2deg) translate(-12px, -6px);
  }
  74% {
    -webkit-transform: scale(0.97) scaleX(1.04) scaleY(0.96) rotate(1deg) translate(6px, 4px);
            transform: scale(0.97) scaleX(1.04) scaleY(0.96) rotate(1deg) translate(6px, 4px);
  }
  100% {
    -webkit-transform: scale(1.02) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
            transform: scale(1.02) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
  }
}
/*■■■■■■　#2 イントロダクション　■■■■■■■*/
.bg-intruduction {
  margin: 0 auto;
  padding: 4em 0 3em;
  width: 100%;
  background: url(../images/top/bg-introduction.png) center center no-repeat;
  background-size: cover;
  color: #FFF;
  position: relative;
  -webkit-mask-image: url("../images/crip-wabe-top.svg");
  mask-image: url("../images/crip-wabe-top.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center top;
  mask-position: center top;
}
.bg-intruduction .text-read {
  text-align: center;
}

/*■　アニメーション用　■*/
.js-fade-stack {
  margin: 2em auto 4em;
  position: relative;
  max-width: 660px;
}

.js-fade-stack img {
  width: 100%;
  display: block;
}

/* 上に重ねる */
.js-fade-stack .fade-item {
  position: absolute;
  top: 0;
  left: 0;
}

/* 初期状態 */
.js-fade-stack img,
.js-fade-stack .fade-item {
  opacity: 0;
  -webkit-transition: 0.8s ease;
  transition: 0.8s ease;
}

/* 表示 */
.js-fade-stack .is-show {
  opacity: 1;
}

.foot-note-map {
  padding: 5px;
  position: absolute;
  font-family: "Noto Serif JP", serif;
  font-size: 1.2rem;
  line-height: 1.6;
  font-weight: 500;
  color: #FFF;
  bottom: 0;
  right: 0;
}

/*■■■■■■　#3 FLAG/CUBE リンク　■■■■■■■*/
.bg-flag {
  background: -webkit-gradient(linear, left top, right top, from(#006ea1), to(#4c99bd));
  background: linear-gradient(to right, #006ea1, #4c99bd);
  color: #FFF;
}

.bg-cube {
  background: -webkit-gradient(linear, left top, right top, from(#d9988c), to(#e4b7ae));
  background: linear-gradient(to right, #d9988c, #e4b7ae);
  color: #FFF;
}

.apartment-select-block {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  overflow: hidden;
}

.apartment-select-box {
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  max-width: 600px;
}

.mantion-img-box {
  margin: 0 auto 10px;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 9/4;
  border-radius: 15px;
  overflow: hidden;
  background: #eee;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: relative;
}
.mantion-img-box::after {
  padding: 5px 20px;
  content: "外観完成予想図";
  color: #FFF;
  font-size: 1rem;
  position: absolute;
  left: 0;
  bottom: 0;
  text-shadow: 0 0 6px #000, 0 0 12px #000, 0 0 18px #000, 0 0 24px #000;
}
.mantion-img-box img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
}

.apartment-text-box {
  text-align: center;
}

.apartment-title {
  font-family: "Noto Serif JP", serif;
  font-size: 2.2rem;
  line-height: 1.4;
  font-weight: 600;
}
.apartment-title strong {
  font-size: 3.2rem;
  font-weight: 600;
}

.text-tume {
  letter-spacing: -2px;
}

.apartment-sub-title {
  font-family: "Noto Serif JP", serif;
  font-size: 1.9rem;
  line-height: 1.4;
  font-weight: 600;
}
.apartment-sub-title strong {
  font-size: 2.3rem;
  font-size: clamp(2rem, 4.6vw, 2.2rem);
  font-weight: 600;
}

/*■　リンクボタン FLAG　■*/
.apartment-btn-box {
  margin: 15px 0 0;
}

a.top-link-btn-flag {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 5px;
  width: 290px;
  height: 52px;
  border-radius: 26px;
  background-color: #FFF;
  color: #006ea1;
  font-size: 1.9rem;
  font-weight: 500;
  -webkit-transition: -webkit-box-shadow 0.4s ease, -webkit-transform 0.4s ease;
  transition: -webkit-box-shadow 0.4s ease, -webkit-transform 0.4s ease;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  transition: box-shadow 0.4s ease, transform 0.4s ease, -webkit-box-shadow 0.4s ease, -webkit-transform 0.4s ease;
}
a.top-link-btn-flag:after {
  content: "";
  display: block;
  width: 26px;
  height: 16px;
  background: url(../images/top/btn-arrow-flag.svg) center center no-repeat;
  background-size: cover;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}
a.top-link-btn-flag:link, a.top-link-btn-flag:visited, a.top-link-btn-flag:hover, a.top-link-btn-flag:active {
  color: #006ea1;
}

a.top-link-btn-flag:hover {
  -webkit-box-shadow: 0 0 16px rgba(70, 100, 150, 0.8);
          box-shadow: 0 0 16px rgba(70, 100, 150, 0.8);
}
a.top-link-btn-flag:hover:after {
  -webkit-transform: translateX(6px);
          transform: translateX(6px);
}

/*■　リンクボタン CUBE　■*/
.cube-btn-box {
  margin: 15px 0 20px;
}

a.top-link-btn-cube {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 5px;
  width: 290px;
  height: 52px;
  border-radius: 26px;
  background-color: #FFF;
  color: #d9988c;
  font-size: 1.9rem;
  font-weight: 500;
}
a.top-link-btn-cube:after {
  content: "";
  display: block;
  width: 26px;
  height: 16px;
  background: url(../images/top/btn-arrow-cube.svg) center center no-repeat;
  background-size: cover;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}
a.top-link-btn-cube:link, a.top-link-btn-cube:visited, a.top-link-btn-cube:hover, a.top-link-btn-cube:active {
  color: #d9988c;
}

a.top-link-btn-cube:hover {
  -webkit-box-shadow: 0 0 16px rgba(217, 152, 140, 0.8);
          box-shadow: 0 0 16px rgba(217, 152, 140, 0.8);
}
a.top-link-btn-cube:hover:after {
  -webkit-transform: translateX(6px);
          transform: translateX(6px);
}

/*■■■■■■　#4 アクセス　■■■■■■■*/
.bg-access {
  margin: 0 0 4em;
  width: 100%;
  height: 1500px;
  background: url(../images/top/bg-access_pc.webp) bottom center no-repeat;
  background-size: cover;
  position: relative;
  -webkit-mask-image: url("../images/crip-wave-bottom_16-9.svg");
  mask-image: url("../images/crip-wave-bottom_16-9.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center top;
  mask-position: center top;
}

.access-block {
  margin: 0;
}

.access-data-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 40px;
}

.access-data-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 346px;
}

.access-title-keihan {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  min-width: 340px;
  height: 30px;
  border-radius: 6px;
  background-color: #009151;
  color: #FFF;
  font-size: 1.5rem;
  font-weight: 500;
}

.access-title-chikatetsu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  min-width: 340px;
  height: 30px;
  border-radius: 6px;
  background-color: #95a8b2;
  color: #FFF;
  font-size: 1.5rem;
  font-weight: 500;
}

.access-title-jrnara {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  min-width: 340px;
  height: 30px;
  border-radius: 6px;
  background-color: #0075b5;
  color: #FFF;
  font-size: 1.5rem;
  font-weight: 500;
}

.access-note {
  font-size: 1.1rem;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
}

.access-table tr td {
  padding: 0 5px;
  font-family: "Noto Serif JP", serif;
  font-size: 2rem;
  vertical-align: baseline;
  font-weight: 500;
}
.access-table tr td strong {
  margin: 0 2px;
  font-size: 3rem;
  line-height: 0.6;
  font-weight: 400;
}
.access-table tr td strong.text-color-keihan {
  color: #009151;
}
.access-table tr td strong.text-color-chikatetsu {
  color: #95a8b2;
}
.access-table tr td strong.text-color-jrnara {
  color: #0075b5;
}
.access-table td:nth-child(1) {
  text-align: left;
}
.access-table td:nth-child(2) {
  text-align: right;
  font-size: 1.8rem;
}
.access-table td:nth-child(3) {
  text-align: right;
}

.text-note {
  font-size: 1rem;
}

.access-btn-box {
  margin: 8em 0 0;
}

.access-img-caption {
  padding: 5px 10px;
  font-family: "Noto Serif JP", serif;
  font-size: 1rem;
  color: #FFF;
  position: absolute;
  right: 10px;
  bottom: 20px;
  text-shadow: 0 0 1px #000, 0 0 3px #000, 0 0 5px #000, 0 0 7px #000;
}

/*■■　インフォメーション　■■*/
.contents-info-block {
  padding: 3em 0 3em;
  position: relative;
  overflow: hidden;
}

.news-list {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  border-top: 1px solid #ddd;
}

.news-item {
  padding: 1.5rem;
  border-bottom: 1px solid #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1rem;
}

.news-meta {
  width: 220px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}

.news-date {
  color: #666;
  white-space: nowrap;
}

.news-category {
  width: 100px; /* 幅固定 */
  height: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 999px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.news-category.general {
  background: #54b77f;
}

.news-category.flag {
  background: #006ea1;
}

.news-category.cube {
  background: #d9988c;
}

.news-text {
  margin: 0;
  line-height: 1.8;
  font-size: 1.6rem;
  max-width: 50em;
  text-align: left;
}

/* SP */
@media (max-width: 768px) {
  .news-item {
    padding: 1.5rem 0.5rem;
    gap: 1.5rem;
  }
  .news-meta {
    width: 110px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; /* 中央揃え */
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 0.6rem;
    text-align: center;
  }
  .news-date {
    width: 100%;
    text-align: center;
  }
  .news-text {
    font-size: 1.5rem;
  }
}
/*===============================
■■　スマホ用　■■
===============================*/
/*------------(XS)------------*/
@media (min-width: 320px) and (max-width: 767px) {
  /*■　SP共有設定　■*/
  .sp-wide {
    margin: 0 auto;
    width: 100%;
    max-width: 320px;
  }
  /*■■■■■■　#0 ココシティ俯瞰 (XS)　■■■■■■■*/
  .top-fv {
    margin-top: 0;
    width: 100%;
    aspect-ratio: 4/6;
    overflow: hidden;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    position: relative;
    -webkit-mask-image: url("../images/crip-wave-bottom_4-6.svg");
    mask-image: url("../images/crip-wave-bottom_4-6.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top;
    mask-position: top;
  }
  .top-fv img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }
  /*タイトル(XS)*/
  .top-title {
    padding: 0;
    font-family: "Noto Serif JP", serif;
    font-size: 3rem;
    font-weight: 500;
    color: #FFF;
    position: absolute;
    z-index: 2;
    top: 10%;
    left: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    display: none;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: center;
  }
  .top-title .top-title-img img {
    margin: 0 auto 10px;
    width: 240px;
    height: auto;
  }
  .top-title .top-title-m {
    font-size: 2.2rem;
    text-align: center;
  }
  .top-title .top-title-m small {
    font-size: 2rem;
  }
  .top-title .top-title-s {
    font-size: 1.6rem;
    line-height: 1.2;
    text-align: center;
    font-weight: 500;
  }
  .top-title .top-title-l {
    margin: 0 0 0 1rem;
    font-size: 2.7rem;
    text-align: center;
  }
  .top-title .top-title-l strong.text-large {
    font-family: "Cormorant", serif;
    font-size: 5rem;
    line-height: 0.9;
    font-weight: 300;
  }
  .top-title .top-title-l span {
    font-size: 3.2rem;
  }
  /*トップサブタイトル(XS)*/
  .top-sub-title {
    position: absolute;
    bottom: 40px;
    left: 5%;
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .top-subtitle-s {
    font-family: "Noto Serif JP", serif;
    font-size: 3rem;
    font-weight: 500;
    color: #FFF;
  }
  .top-subtitle-s {
    margin: 0 0 0 -1rem;
    font-family: "Noto Serif JP", serif;
    font-size: 2.6rem;
    font-weight: 500;
    color: #006ea1;
    text-shadow: 0 0 1px #FFF, 0 0 2px #FFF, 0 0 3px #FFF, 0 0 4px #FFF, 0 0 5px #FFF, 0 0 6px #FFF, 0 0 7px #FFF, 0 0 8px #FFF, 0 0 9px #FFF, 0 0 10px #FFF, 0 0 11px #FFF, 0 0 12px #FFF;
  }
  .top-subtitle-s span {
    margin: 0 0 0 -1rem;
    font-size: 2.2rem;
  }
  .top-subtitle-m {
    font-family: "Noto Serif JP", serif;
    font-size: 2.6rem;
    font-weight: 500;
    color: #006ea1;
    position: relative;
    text-shadow: 0 0 1px #FFF, 0 0 2px #FFF, 0 0 3px #FFF, 0 0 4px #FFF, 0 0 5px #FFF, 0 0 6px #FFF, 0 0 7px #FFF, 0 0 8px #FFF, 0 0 9px #FFF, 0 0 10px #FFF, 0 0 11px #FFF, 0 0 12px #FFF;
  }
  .top-subtitle-m span {
    margin: 0 -4px;
    font-family: "Cormorant", serif;
    font-size: 3.4rem;
    line-height: 1;
  }
  .top-subtitle-m strong.sub-text-l {
    margin: 0;
    font-family: "Cormorant", serif;
    font-size: 5rem;
    line-height: 0.8;
    font-weight: 400;
  }
  .top-subtitle-m strong {
    font-size: 3.6rem;
    line-height: 1;
    font-weight: 400;
  }
  .top-subtitle-m sup {
    padding: 0 0 0 16px;
    top: 10px;
    display: inline-block;
    position: absolute;
    font-size: 1.2rem;
  }
  .top-note {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    text-shadow: 0 0 1px #FFF, 0 0 2px #FFF, 0 0 3px #FFF, 0 0 4px #FFF, 0 0 5px #FFF, 0 0 6px #FFF;
  }
  .top-img-caption {
    padding: 5px 10px;
    font-size: 1rem;
    color: #FFF;
    position: absolute;
    right: 10px;
    bottom: 20px;
    text-shadow: 0 0 1px #000, 0 0 3px #000, 0 0 5px #000, 0 0 7px #000;
  }
  /*■■■■■■　#1 ウェルカム(XS)　■■■■■■■*/
  .top-welcome {
    margin: 0;
    padding: 4em 0 4em;
    background-color: #e6f1f2;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF), color-stop(7%, #e6f1f2), color-stop(80%, #e6f1f2), to(#FFF));
    background: linear-gradient(to bottom, #FFF 0, #e6f1f2 7%, #e6f1f2 80%, #FFF 100%);
    position: relative;
    overflow: hidden;
  }
  /*トップタイトル*/
  .top-text-s {
    font-family: "Noto Serif JP", serif;
    font-size: 3.4rem;
    line-height: 1.4;
    font-weight: 600;
  }
  .top-text-s span {
    margin-right: -1rem;
  }
  .top-catch-img {
    margin: 1em auto 2em;
    width: 100%;
    max-width: 320px;
  }
  /*バルーン(XS)*/
  .top-text-balloon {
    margin: 0 auto 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: auto;
    max-width: 390px;
    position: relative;
    padding: 10px 15px;
    white-space: nowrap;
    font-family: "Noto Serif JP", serif;
    font-size: 1.9rem;
    color: #006ea1;
    text-align: center;
    background-color: #FFF;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 6px #dceaec;
            box-shadow: 0 0 6px #dceaec;
  }
  .top-text-balloon:after {
    content: "";
    margin-left: -10px;
    width: 0;
    height: 0;
    position: absolute;
    left: 27%;
    bottom: -20px;
    border-style: solid;
    border-width: 10px 8px;
    border-color: #FFF #FFF transparent transparent;
    z-index: 4;
  }
  .top-text-balloon:before {
    content: "";
    margin-left: -11px;
    width: 0;
    height: 0;
    position: absolute;
    left: 27%;
    bottom: -22px;
    border-style: solid;
    border-width: 11px 9px;
    border-color: #dceaec #dceaec transparent transparent;
    z-index: 3;
  }
  .top-catch-block {
    margin: 0 0 4em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 10px;
  }
  .top-catch-l {
    margin: 0 auto;
    padding: 5px 15px;
    background-color: #fff;
    color: #007481;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    width: auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-family: "Noto Serif JP", serif;
    font-size: 3.4rem;
    line-height: 1.2;
    font-weight: 500;
  }
  .top-catch-l span {
    margin: 0 -15px 0 -10px;
  }
  .top-catch-l sup {
    margin-top: -1rem;
    font-size: 1.1rem;
  }
  .top-catch-m {
    margin: 0 auto;
    padding: 5px 20px;
    background-color: #fff;
    color: #007481;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-family: "Noto Serif JP", serif;
    font-size: clamp(1.5rem, 4.4vw, 2rem);
    line-height: 1.2;
    font-weight: 500;
  }
  /*■■■ アメーバオブジェクト(XS) ■■■*/
  .bg-obj {
    position: absolute;
    pointer-events: none;
    will-change: transform;
    opacity: 0.5;
  }
  .bg-obj img {
    display: block;
    width: 100%;
    height: auto;
  }
  .bg-obj-1 {
    top: 30%;
    left: -60px;
    width: 200px;
    -webkit-animation: floatA 18s ease-in-out infinite alternate;
            animation: floatA 18s ease-in-out infinite alternate;
    -webkit-animation-duration: 18s;
            animation-duration: 18s;
  }
  .bg-obj-2 {
    top: 25%;
    right: -60px;
    width: 200px;
    -webkit-animation: floatB 22s ease-in-out infinite alternate;
            animation: floatB 22s ease-in-out infinite alternate;
    -webkit-animation-duration: 24s;
            animation-duration: 24s;
  }
  .bg-obj-3 {
    bottom: -10px;
    left: -10px;
    width: 150px;
    -webkit-animation: floatC 20s ease-in-out infinite alternate;
            animation: floatC 20s ease-in-out infinite alternate;
    -webkit-animation-duration: 22s;
            animation-duration: 22s;
  }
  .bg-obj-4 {
    bottom: 20%;
    right: -60px;
    width: 150px;
    -webkit-animation: floatD 24s ease-in-out infinite alternate;
            animation: floatD 24s ease-in-out infinite alternate;
    -webkit-animation-duration: 16s;
            animation-duration: 16s;
  }
  /* =========================
  A
  ========================= */
  @-webkit-keyframes floatA {
    0% {
      -webkit-transform: scale(1) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
              transform: scale(1) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
    }
    25% {
      -webkit-transform: scale(1.08) scaleX(1.04) scaleY(0.96) rotate(2deg) translate(10px, -8px);
              transform: scale(1.08) scaleX(1.04) scaleY(0.96) rotate(2deg) translate(10px, -8px);
    }
    50% {
      -webkit-transform: scale(0.96) scaleX(0.92) scaleY(1.08) rotate(-2deg) translate(-8px, 6px);
              transform: scale(0.96) scaleX(0.92) scaleY(1.08) rotate(-2deg) translate(-8px, 6px);
    }
    75% {
      -webkit-transform: scale(1.06) scaleX(1.08) scaleY(0.92) rotate(1deg) translate(6px, -4px);
              transform: scale(1.06) scaleX(1.08) scaleY(0.92) rotate(1deg) translate(6px, -4px);
    }
    100% {
      -webkit-transform: scale(1) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
              transform: scale(1) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
    }
  }
  @keyframes floatA {
    0% {
      -webkit-transform: scale(1) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
              transform: scale(1) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
    }
    25% {
      -webkit-transform: scale(1.08) scaleX(1.04) scaleY(0.96) rotate(2deg) translate(10px, -8px);
              transform: scale(1.08) scaleX(1.04) scaleY(0.96) rotate(2deg) translate(10px, -8px);
    }
    50% {
      -webkit-transform: scale(0.96) scaleX(0.92) scaleY(1.08) rotate(-2deg) translate(-8px, 6px);
              transform: scale(0.96) scaleX(0.92) scaleY(1.08) rotate(-2deg) translate(-8px, 6px);
    }
    75% {
      -webkit-transform: scale(1.06) scaleX(1.08) scaleY(0.92) rotate(1deg) translate(6px, -4px);
              transform: scale(1.06) scaleX(1.08) scaleY(0.92) rotate(1deg) translate(6px, -4px);
    }
    100% {
      -webkit-transform: scale(1) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
              transform: scale(1) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
    }
  }
  /* =========================
  B
  ========================= */
  @-webkit-keyframes floatB {
    0% {
      -webkit-transform: scale(0.98) scaleX(1.1) scaleY(0.98) rotate(-1deg) translate(0, 0);
              transform: scale(0.98) scaleX(1.1) scaleY(0.98) rotate(-1deg) translate(0, 0);
    }
    20% {
      -webkit-transform: scale(1.05) scaleX(0.94) scaleY(1.08) rotate(2deg) translate(-12px, 8px);
              transform: scale(1.05) scaleX(0.94) scaleY(1.08) rotate(2deg) translate(-12px, 8px);
    }
    45% {
      -webkit-transform: scale(0.94) scaleX(1.08) scaleY(0.9) rotate(-3deg) translate(8px, -10px);
              transform: scale(0.94) scaleX(1.08) scaleY(0.9) rotate(-3deg) translate(8px, -10px);
    }
    70% {
      -webkit-transform: scale(1.07) scaleX(1.02) scaleY(0.96) rotate(1deg) translate(-6px, 4px);
              transform: scale(1.07) scaleX(1.02) scaleY(0.96) rotate(1deg) translate(-6px, 4px);
    }
    100% {
      -webkit-transform: scale(0.98) scaleX(1.02) scaleY(0.98) rotate(-1deg) translate(0, 0);
              transform: scale(0.98) scaleX(1.02) scaleY(0.98) rotate(-1deg) translate(0, 0);
    }
  }
  @keyframes floatB {
    0% {
      -webkit-transform: scale(0.98) scaleX(1.1) scaleY(0.98) rotate(-1deg) translate(0, 0);
              transform: scale(0.98) scaleX(1.1) scaleY(0.98) rotate(-1deg) translate(0, 0);
    }
    20% {
      -webkit-transform: scale(1.05) scaleX(0.94) scaleY(1.08) rotate(2deg) translate(-12px, 8px);
              transform: scale(1.05) scaleX(0.94) scaleY(1.08) rotate(2deg) translate(-12px, 8px);
    }
    45% {
      -webkit-transform: scale(0.94) scaleX(1.08) scaleY(0.9) rotate(-3deg) translate(8px, -10px);
              transform: scale(0.94) scaleX(1.08) scaleY(0.9) rotate(-3deg) translate(8px, -10px);
    }
    70% {
      -webkit-transform: scale(1.07) scaleX(1.02) scaleY(0.96) rotate(1deg) translate(-6px, 4px);
              transform: scale(1.07) scaleX(1.02) scaleY(0.96) rotate(1deg) translate(-6px, 4px);
    }
    100% {
      -webkit-transform: scale(0.98) scaleX(1.02) scaleY(0.98) rotate(-1deg) translate(0, 0);
              transform: scale(0.98) scaleX(1.02) scaleY(0.98) rotate(-1deg) translate(0, 0);
    }
  }
  /* =========================
  C
  ========================= */
  @-webkit-keyframes floatC {
    0% {
      -webkit-transform: scale(1) scaleX(0.96) scaleY(1.04) rotate(1deg) translate(0, 0);
              transform: scale(1) scaleX(0.96) scaleY(1.04) rotate(1deg) translate(0, 0);
    }
    30% {
      -webkit-transform: scale(1.1) scaleX(1.1) scaleY(0.9) rotate(-2deg) translate(14px, -6px);
              transform: scale(1.1) scaleX(1.1) scaleY(0.9) rotate(-2deg) translate(14px, -6px);
    }
    55% {
      -webkit-transform: scale(0.92) scaleX(0.88) scaleY(1.12) rotate(3deg) translate(-10px, 10px);
              transform: scale(0.92) scaleX(0.88) scaleY(1.12) rotate(3deg) translate(-10px, 10px);
    }
    80% {
      -webkit-transform: scale(1.03) scaleX(1.06) scaleY(0.95) rotate(-1deg) translate(4px, -8px);
              transform: scale(1.03) scaleX(1.06) scaleY(0.95) rotate(-1deg) translate(4px, -8px);
    }
    100% {
      -webkit-transform: scale(1) scaleX(0.96) scaleY(1.04) rotate(1deg) translate(0, 0);
              transform: scale(1) scaleX(0.96) scaleY(1.04) rotate(1deg) translate(0, 0);
    }
  }
  @keyframes floatC {
    0% {
      -webkit-transform: scale(1) scaleX(0.96) scaleY(1.04) rotate(1deg) translate(0, 0);
              transform: scale(1) scaleX(0.96) scaleY(1.04) rotate(1deg) translate(0, 0);
    }
    30% {
      -webkit-transform: scale(1.1) scaleX(1.1) scaleY(0.9) rotate(-2deg) translate(14px, -6px);
              transform: scale(1.1) scaleX(1.1) scaleY(0.9) rotate(-2deg) translate(14px, -6px);
    }
    55% {
      -webkit-transform: scale(0.92) scaleX(0.88) scaleY(1.12) rotate(3deg) translate(-10px, 10px);
              transform: scale(0.92) scaleX(0.88) scaleY(1.12) rotate(3deg) translate(-10px, 10px);
    }
    80% {
      -webkit-transform: scale(1.03) scaleX(1.06) scaleY(0.95) rotate(-1deg) translate(4px, -8px);
              transform: scale(1.03) scaleX(1.06) scaleY(0.95) rotate(-1deg) translate(4px, -8px);
    }
    100% {
      -webkit-transform: scale(1) scaleX(0.96) scaleY(1.04) rotate(1deg) translate(0, 0);
              transform: scale(1) scaleX(0.96) scaleY(1.04) rotate(1deg) translate(0, 0);
    }
  }
  /* =========================
  D
  ========================= */
  @-webkit-keyframes floatD {
    0% {
      -webkit-transform: scale(1.02) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
              transform: scale(1.02) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
    }
    22% {
      -webkit-transform: scale(0.95) scaleX(1.12) scaleY(0.88) rotate(2deg) translate(10px, 12px);
              transform: scale(0.95) scaleX(1.12) scaleY(0.88) rotate(2deg) translate(10px, 12px);
    }
    48% {
      -webkit-transform: scale(1.08) scaleX(0.92) scaleY(1.1) rotate(-2deg) translate(-12px, -6px);
              transform: scale(1.08) scaleX(0.92) scaleY(1.1) rotate(-2deg) translate(-12px, -6px);
    }
    74% {
      -webkit-transform: scale(0.97) scaleX(1.04) scaleY(0.96) rotate(1deg) translate(6px, 4px);
              transform: scale(0.97) scaleX(1.04) scaleY(0.96) rotate(1deg) translate(6px, 4px);
    }
    100% {
      -webkit-transform: scale(1.02) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
              transform: scale(1.02) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
    }
  }
  @keyframes floatD {
    0% {
      -webkit-transform: scale(1.02) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
              transform: scale(1.02) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
    }
    22% {
      -webkit-transform: scale(0.95) scaleX(1.12) scaleY(0.88) rotate(2deg) translate(10px, 12px);
              transform: scale(0.95) scaleX(1.12) scaleY(0.88) rotate(2deg) translate(10px, 12px);
    }
    48% {
      -webkit-transform: scale(1.08) scaleX(0.92) scaleY(1.1) rotate(-2deg) translate(-12px, -6px);
              transform: scale(1.08) scaleX(0.92) scaleY(1.1) rotate(-2deg) translate(-12px, -6px);
    }
    74% {
      -webkit-transform: scale(0.97) scaleX(1.04) scaleY(0.96) rotate(1deg) translate(6px, 4px);
              transform: scale(0.97) scaleX(1.04) scaleY(0.96) rotate(1deg) translate(6px, 4px);
    }
    100% {
      -webkit-transform: scale(1.02) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
              transform: scale(1.02) scaleX(1) scaleY(1) rotate(0deg) translate(0, 0);
    }
  }
  /*■■■■■■　#2 イントロダクション(XS)　■■■■■■■*/
  .bg-intruduction {
    padding: 4em 0 0;
    background: url(../images/top/bg-introduction_sp.png) top center no-repeat;
    background-size: 100% auto;
    color: #FFF;
    position: relative;
    -webkit-mask-image: url("../images/crip-wabe-top_sp.svg");
    mask-image: url("../images/crip-wabe-top_sp.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    mask-position: center top;
  }
  .bg-intruduction .text-read {
    text-align: left;
  }
  /*■　アニメーション用　■*/
  .js-fade-stack {
    margin: 2em auto 4em;
    position: relative;
    max-width: 390px;
  }
  .js-fade-stack img {
    width: 100%;
    display: block;
  }
  /* 上に重ねる */
  .js-fade-stack .fade-item {
    position: absolute;
    top: 0;
    left: 0;
  }
  /* 初期状態 */
  .js-fade-stack img,
  .js-fade-stack .fade-item {
    opacity: 0;
    -webkit-transition: 0.8s ease;
    transition: 0.8s ease;
  }
  /* 表示 */
  .js-fade-stack .is-show {
    opacity: 1;
  }
  .foot-note-map {
    padding: 5px;
    position: absolute;
    font-family: "Noto Serif JP", serif;
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: 500;
    color: #FFF;
    bottom: 0;
    right: 0;
  }
  /*■■■■■■　#4 アクセス(XS)　■■■■■■■*/
  .bg-access {
    margin: 0 0 3em;
    width: 100%;
    height: auto;
    aspect-ratio: 9/16;
    background: url(../images/top/bg-access_sp.webp) bottom center no-repeat;
    background-size: 100% auto;
    position: relative;
    -webkit-mask-image: url("../images/crip-wave-bottom_9-16.svg");
    mask-image: url("../images/crip-wave-bottom_9-16.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top;
    mask-position: top;
  }
  .access-block {
    margin: 0;
  }
  .access-data-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 40px;
  }
  .access-data-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 370px;
  }
  .access-title-keihan {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    min-width: 340px;
    height: 30px;
    border-radius: 6px;
    background-color: #009151;
    color: #FFF;
    font-size: 1.5rem;
    font-weight: 500;
  }
  .access-title-chikatetsu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    min-width: 340px;
    height: 30px;
    border-radius: 6px;
    background-color: #95a8b2;
    color: #FFF;
    font-size: 1.5rem;
    font-weight: 500;
  }
  .access-title-jrnara {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    min-width: 340px;
    height: 30px;
    border-radius: 6px;
    background-color: #0075b5;
    color: #FFF;
    font-size: 1.5rem;
    font-weight: 500;
  }
  .access-note {
    font-size: 1.1rem;
    -webkit-font-feature-settings: "palt";
            font-feature-settings: "palt";
  }
  .access-table {
    width: 100%;
    max-width: 370;
  }
  .access-table tr td {
    padding: 0 5px;
    font-family: "Noto Serif JP", serif;
    font-size: 2.2rem;
    vertical-align: baseline;
    font-weight: 500;
    white-space: nowrap;
  }
  .access-table tr td strong {
    margin: 0 2px;
    font-size: 3.4rem;
    line-height: 0.6;
    font-weight: 400;
  }
  .access-table tr td strong.text-color-keihan {
    color: #009151;
  }
  .access-table tr td strong.text-color-chikatetsu {
    color: #95a8b2;
  }
  .access-table tr td strong.text-color-jrnara {
    color: #0075b5;
  }
  .access-table td:nth-child(1) {
    text-align: left;
  }
  .access-table td:nth-child(2) {
    text-align: right;
    font-size: 1.6rem;
  }
  .access-table td:nth-child(3) {
    text-align: right;
  }
  .text-note {
    font-size: 1rem;
  }
  .access-btn-box {
    margin: 5em 0 1em;
  }
} /*xs*/
/*------------(SM)------------*/
@media (min-width: 768px) and (max-width: 1023px) {
  /*■■■■■■　#0 ココシティ俯瞰 (SM)　■■■■■■■*/
  .top-fv {
    margin-top: 0;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background-color: #e6f1f2;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    position: relative;
    -webkit-mask-image: url("../images/crip-wave-bottom_16-9.svg");
    mask-image: url("../images/crip-wave-bottom_16-9.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top;
    mask-position: top;
  }
  .top-fv img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }
  /*■■■■■■　#1 ウェルカム(SM)　■■■■■■■*/
  .top-welcome {
    margin: 0 auto;
    padding: 4em 0 4em;
  }
  /*トップタイトル*/
  .top-text-s {
    font-family: "Noto Serif JP", serif;
    font-size: 4rem;
    line-height: 1.4;
    font-weight: 600;
  }
  .top-text-s span {
    margin-right: -1rem;
  }
  .top-catch-img {
    margin: 1em auto 2em;
    width: 100%;
    max-width: 400px;
  }
  .top-catch-block {
    margin: 0 0 4em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 10px;
  }
  .top-catch-l {
    margin: 0 auto;
    padding: 5px 15px;
    background-color: #fff;
    color: #007481;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    width: auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-family: "Noto Serif JP", serif;
    font-size: 4rem;
    line-height: 1.2;
    font-weight: 500;
  }
  .top-catch-l span {
    margin: 0 -15px 0 -10px;
  }
  .top-catch-l sup {
    margin-top: -1rem;
    font-size: 1.3rem;
  }
  .top-catch-m {
    margin: 0 auto;
    padding: 5px 20px;
    background-color: #fff;
    color: #007481;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-family: "Noto Serif JP", serif;
    font-size: 2.6rem;
    line-height: 1.2;
    font-weight: 500;
  }
  .bg-intruduction {
    padding: 4em 0 0;
    background: url(../images/top/bg-introduction_sp.png) top center no-repeat #6ca5ac;
    background-size: 100% auto;
    color: #FFF;
    position: relative;
    -webkit-mask-image: url("../images/crip-wabe-top_sp.svg");
    mask-image: url("../images/crip-wabe-top_sp.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    mask-position: center top;
  }
  .bg-intruduction .text-read {
    text-align: left;
  }
  /*■■■■■■　#3 FLAG/CUBE リンク(SM)　■■■■■■■*/
  .bg-flag {
    background: -webkit-gradient(linear, left top, right top, from(#006ea1), to(#4c99bd));
    background: linear-gradient(to right, #006ea1, #4c99bd);
    color: #FFF;
  }
  .bg-cube {
    background: -webkit-gradient(linear, left top, right top, from(#d9988c), to(#e4b7ae));
    background: linear-gradient(to right, #d9988c, #e4b7ae);
    color: #FFF;
  }
  .apartment-select-block {
    max-width: 1024px;
  }
  .apartment-select-box {
    max-width: 512px;
  }
  .mantion-img-box {
    width: 100%;
    max-width: 472px;
  }
} /*SM*/
/*------------(MD)------------*/
@media (min-width: 1024px) and (max-width: 1215px) {
  /*■■■■■■　#3 FLAG/CUBE リンク(SM)　■■■■■■■*/
  .bg-flag {
    background: -webkit-gradient(linear, left top, right top, from(#006ea1), to(#4c99bd));
    background: linear-gradient(to right, #006ea1, #4c99bd);
    color: #FFF;
  }
  .bg-cube {
    background: -webkit-gradient(linear, left top, right top, from(#d9988c), to(#e4b7ae));
    background: linear-gradient(to right, #d9988c, #e4b7ae);
    color: #FFF;
  }
  .apartment-select-block {
    max-width: 1024px;
  }
  .apartment-select-box {
    max-width: 512px;
  }
  .mantion-img-box {
    width: 100%;
    max-width: 472px;
  }
}
/*------------(LG)------------*/
@media (min-width: 1216px) and (max-width: 1439px) {
  /*■■■■■■　#4 アクセス(LG)　■■■■■■■*/
  .bg-access {
    height: 1200px;
  }
  .contents-info-block {
    padding: 3em 0 6em;
  }
}
/*------------(XL)------------*/
@media (min-width: 1440px) {
  /*■■■■■■　#4 アクセス(XL)　■■■■■■■*/
  .bg-access {
    height: 1200px;
  }
  .contents-info-block {
    padding: 4em 0 8em;
  }
} /*XL*/
/*------------(XXL)------------*/
@media (min-width: 1441px) {
  /*■■■■■■　#4 アクセス(XXL)　■■■■■■■*/
  .bg-access {
    height: 1500px;
  }
  .contents-info-block {
    padding: 5em 0 10em;
  }
} /*XXL*/
/*------------(XXXL)------------*/
@media (min-width: 1921px) {
  /*■■■■■■　#4 アクセス(XXL)　■■■■■■■*/
  .bg-access {
    height: 2300px;
  }
} /*XXXL*/