@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;
}

/*■　基本設定　■*/
.text-mi-en {
  margin-bottom: 20px;
  font-family: "Jost", sans-serif;
  font-size: 3.5rem;
  font-weight: 500;
}

.text-color-main {
  color: #007480;
}

.text-read-m {
  margin-bottom: 6px;
  font-family: "Noto Serif JP", serif;
  font-size: 2.7rem;
  line-height: 1.4;
  font-weight: 500;
}

.text-title-l {
  margin-bottom: 30px;
  font-family: "Noto Serif JP", serif;
  font-size: 3.6rem;
  line-height: 1.4;
  font-weight: 500;
}

.text-title {
  margin-bottom: 20px;
  font-family: "Noto Serif JP", serif;
  font-size: 3.2rem;
  line-height: 1.4;
  font-weight: 500;
}

.text-color-coco {
  color: #007481;
}

/*■■■■■■　#0 ロケーショントップイメージ　■■■■■■■*/
.location-fv {
  margin: 80px auto 0;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #006ea1;
  -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-mode: luminance;
  mask-mode: luminance;
  -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;
}

.location-fv img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
}
.location-fv img.sp-view {
  display: none;
}
.location-fv img.pc-view {
  display: block;
}

/*タイトル*/
.location-title {
  padding: 0 0 0 5%;
  font-family: "Noto Serif JP", serif;
  font-size: 4.6rem;
  line-height: 1.6;
  font-weight: 500;
  color: #FFF;
  position: absolute;
  top: 15%;
  left: 0;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  alidn-items: flex-start;
  -webkit-box-pack: flec-start;
      -ms-flex-pack: flec-start;
          justify-content: flec-start;
  text-align: left;
  width: 100%;
  text-shadow: 0 0 6px #2b7cdd, 0 0 12px #2b7cdd, 0 0 18px #2b7cdd, 0 0 24px #2b7cdd;
  text-align: left;
}

.top-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;
}

/*■■■■■■　#1 アクセス情報　■■■■■■■*/
.bg-location {
  margin: -2em auto 0;
  padding: 4em 0 6em;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/*■■■ アメーバオブジェクト ■■■*/
.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%;
  right: -60px;
  width: 800px;
  -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%;
  legt: -60px;
  width: 500px;
  -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: -80px;
  right: -10px;
  width: 700px;
  -webkit-animation: floatC 20s ease-in-out infinite alternate;
          animation: floatC 20s ease-in-out infinite alternate;
  -webkit-animation-duration: 22s;
          animation-duration: 22s;
}

/* =========================
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);
  }
}
/*■■■■■■　#2 近隣施設スワイパー　■■■■■■■*/
.facility-slider {
  margin: 0 auto;
  padding: 20px 0;
  width: 100%;
  max-width: 1920px;
}

.facility-swiper-wrap {
  overflow: visible; /* ←ここ重要 */
}

.facility-swiper .swiper-wrapper {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.facility-slider .facility-swiper .swiper-slide {
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* Swiper */
.facility-slider .facility-swiper {
  padding: 0 0 40px;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  position: relative;
}

/* スライド幅（チラ見せ） */
.facility-slider .facility-swiper .swiper-slide {
  width: 280px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /*background-color:#FFF;*/
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

/* カード */
.card {
  width: 100%;
  max-sidth: 360px;
  padding: 16px 16px 30px;
  border-radius: 12px;
  height: 100%; /* 高さ揃え */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -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;
  gap: 15px;
}

.card.card-green {
  background-color: #e5f4ec;
}
.card.card-green p.card-title {
  color: #54b77f;
}

.card.card-blue {
  background-color: #e4eef5;
}
.card.card-blue p.card-title {
  color: #4d8cbe;
}

.card.card-pink {
  background-color: #fce9e8;
}
.card.card-pink p.card-title {
  color: #ec6d65;
}

/* 画像 4:3 */
.card-img {
  aspect-ratio: 4/3;
  border-radius: 10px;
  position: relative;
}

.card-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.caption-copyright {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: -15px;
  font-size: 0.7rem;
}

/* テキスト */
.card-title {
  font-family: "Noto Serif JP", serif;
  font-size: 2.4rem;
  line-height: 1.2;
  fontweight: 500;
  text-align: center;
}
.card-title span {
  font-size: 2rem;
}

.card-sub {
  font-size: 1.2rem;
  color: #666;
}

.card-text {
  font-size: 1.3rem;
}

/* ★スケール制御 */
/* 全体 */
.facility-swiper .card {
  -webkit-transform: scale(0.85);
          transform: scale(0.85);
  opacity: 0.5;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/* 中央付近 */
.facility-swiper .swiper-slide-next .card,
.facility-swiper .swiper-slide-prev .card {
  -webkit-transform: scale(0.93);
          transform: scale(0.93);
  opacity: 0.8;
}

/* 擬似中央 */
.facility-swiper .swiper-slide-active .card {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

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

/*矢印位置*/
.custom-prev,
.custom-next {
  width: 50px;
  min-width: 50px;
  height: 50px;
  background: #007481;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 150;
}

.swiper-button-next img {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

/* 位置調整 */
.custom-prev {
  left: 16px; /* カード幅に合わせる */
  right: auto;
}

.custom-next {
  right: 16px;
  left: auto;
}

/*ページネーション*/
.swiper-pagination {
  bottom: 10px;
}

.swiper-pagination-bullet {
  background: #007481;
  opacity: 0.3;
}

.swiper-pagination-bullet-active {
  opacity: 1;
}

/*■■■■■■　#3 グルメ情報　■■■■■■■*/
.gourmet-top-round {
  margin: 0 auto;
  position: relative;
  bottom: -1px;
  display: block;
  width: 100%;
  height: auto;
}

.bg-gourmet {
  margin: 0 auto;
  padding: 2em 0 0;
  width: 100%;
  background-color: #f5eee6;
}
.bg-gourmet p.text-mi-en {
  color: #763b1b;
}

/*グルメスライダー*/
.gourmet-slider {
  padding: 20px 0;
}

.gourmet-swiper-wrap {
  margin: 0 auto;
  width: 100%;
  max-width: 1440px;
  overflow: visible;
}

.gourmet-swiper .swiper-slide {
  width: 100%;
  max-width: 290px;
  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;
}

/* カード（背景なし） */
.gourmet-card {
  width: 100%;
  padding: 0 0 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -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;
  gap: 12px;
  -webkit-transition: opacity 0.35s ease, -webkit-transform 0.35s ease;
  transition: opacity 0.35s ease, -webkit-transform 0.35s ease;
  transition: transform 0.35s ease, opacity 0.35s ease;
  transition: transform 0.35s ease, opacity 0.35s ease, -webkit-transform 0.35s ease;
}

/* 画像は流用OK */
.card-img {
  aspect-ratio: 4/3;
  border-radius: 10px;
}

.card-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* タイトル */
.gourmet-card .card-title {
  font-family: "Noto Serif JP", serif;
  font-size: 2.2rem;
  line-height: 1.2;
  color: #763b1b;
  text-align: center;
}
.gourmet-card .card-title span {
  font-size: 1.4rem;
}

.gourmet-card .card-title small {
  display: block;
  font-size: 1.2rem;
  margin-top: 4px;
  color: #333;
}

/* テキスト */
.gourmet-card .card-text {
  font-size: 1.3rem;
  text-align: left;
}

/* スケール（そのまま流用OK） */
.gourmet-card {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  opacity: 0.4;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.gourmet-swiper .swiper-slide-prev .gourmet-card,
.gourmet-swiper .swiper-slide-next .gourmet-card {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  opacity: 0.7;
}

.gourmet-swiper .swiper-slide-active .gourmet-card {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

/* 矢印 */
.gourmet-prev,
.gourmet-next {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 30%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 10;
}
.gourmet-prev img,
.gourmet-next img {
  width: 12px;
  height: auto;
}

.gourmet-prev {
  left: calc(50% - 185px);
  right: auto;
}

.gourmet-next {
  right: calc(50% - 185px);
  left: auto;
}

.gourmet-next img {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

/* ドット */
.gourmet-pagination {
  text-align: center;
}

.gourmet-pagination .swiper-pagination-bullet {
  background: #763b1b;
  opacity: 0.3;
}

.gourmet-pagination .swiper-pagination-bullet-active {
  opacity: 1;
}

/*■■■■■■　#4 生活環境　■■■■■■■*/
.shop-block {
  margin: 0;
  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: 30px 40px;
}

.shop-box {
  width: 100%;
  max-width: 320px;
  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;
}

.shop-img {
  position: relative;
}
.shop-img img {
  border-radius: 10px;
}

.shop-name {
  font-size: 2rem;
  font-family: "Noto Serif JP", serif;
}

.shop-text {
  font-size: 1.3rem;
  text-align: left;
}

.img-caption {
  padding: 5px;
  font-family: "Noto Serif JP", serif;
  font-size: 1rem;
  color: #FFF;
  font-weight: 500;
  position: absolute;
  bottom: 0;
  right: 0;
}

/*■■■■■■　#5 ライフインフォメーション　■■■■■■■*/
.bg-life-info {
  margin: 0 auto;
  padding: 4em 0;
  width: 100%;
  background-color: #b2d5d9;
}

.bg-gradation-bar-top-light {
  margin: 0 auto;
  height: 21px;
  width: 100%;
  display: block;
  background-color: #FFF;
  border-top: 7px solid #e5f1f2;
  border-bottom: 7px solid #cce3e6;
}

.bg-gradation-bar-top {
  margin: 0 auto;
  height: 21px;
  width: 100%;
  display: block;
  background-color: #b2d5d9;
  border-top: 7px solid #FFF;
  border-bottom: 7px solid #FFF;
}

.bg-gradation-bar-bottom-light {
  margin: 0 auto 4em;
  height: 21px;
  width: 100%;
  display: block;
  background-color: #FFF;
  border-top: 7px solid #cce3e6;
  border-bottom: 7px solid #e5f1f2;
}

.bg-gradation-bar-bottom {
  margin: 0 auto;
  height: 21px;
  width: 100%;
  display: block;
  background-color: #b2d5d9;
  border-top: 7px solid #FFF;
  border-bottom: 7px solid #FFF;
}

.text-hint-pinchiout {
  display: none;
}

/*■　タブ切り替えマップ　■*/
.map-tabs {
  max-width: 800px;
  margin: auto;
}

/* ▼ マップ */
.map-area {
  text-align: center;
  margin-bottom: 20px;
}

.map {
  display: none;
  height: auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.map.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* ▼ タブ */
.tab-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 20px;
}

.tab {
  background-color: #FFF;
  border: none;
  padding: 6px 10px;
  border-radius: 20px;
  cursor: pointer;
  border: 1px solid;
  font-size: 1.6rem;
}

.tab.active {
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 20px;
  cursor: pointer;
}

/* ▼ SP対応 */
@media (max-width: 768px) {
  .tab {
    width: calc(33.333% - 10px);
    text-align: center;
    font-size: 1.3rem;
  }
}
/* ▼ リスト */
.list {
  padding: 32px 16px;
  display: none;
  background: #fff;
  border-radius: 6px;
}

.list.active {
  display: block;
}

.list-title {
  font-size: 1.6rem;
  background: #007481;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  border-radius: 6px;
}

/* ▼ アイテム */
.list-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 15px 5px;
  border-bottom: 2px dotted;
}

.name {
  font-weight: 600;
  font-size: 1.6rem;
  text-align: left;
}

.info-note-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.info {
  text-align: left;
  font-size: 1.3rem;
}

/* =========================
   タブカラー定義
========================= */
/* 商業施設 */
.tab[data-tab=shop] {
  color: #f58d9d;
  border-color: #f58d9d;
}

.tab[data-tab=shop].active {
  background: #f58d9d;
  color: #fff;
}

/* 公共施設 */
.tab[data-tab=public] {
  color: #ffaf48;
  border-color: #ffaf48;
}

.tab[data-tab=public].active {
  background: #ffaf48;
  color: #fff;
}

/* 教育施設 */
.tab[data-tab=education] {
  color: #61c0ef;
  border-color: #61c0ef;
}

.tab[data-tab=education].active {
  background: #61c0ef;
  color: #fff;
}

/* 医療施設 */
.tab[data-tab=medical] {
  color: #a170e3;
  border-color: #a170e3;
}

.tab[data-tab=medical].active {
  background: #a170e3;
  color: #fff;
}

/* 金融機関 */
.tab[data-tab=bank] {
  color: #9dc650;
  border-color: #9dc650;
}

.tab[data-tab=bank].active {
  background: #9dc650;
  color: #fff;
}

/* 公園 */
.tab[data-tab=park] {
  color: #009b43;
  border-color: #009b43;
}

.tab[data-tab=park].active {
  background: #009b43;
  color: #fff;
}

/* 商業施設 */
.list[data-tab=shop] .list-title {
  background: #f58d9d;
}

/* 公共施設 */
.list[data-tab=public] .list-title {
  background: #ffaf48;
}

/* 教育施設 */
.list[data-tab=education] .list-title {
  background: #61c0ef;
}

/* 医療施設 */
.list[data-tab=medical] .list-title {
  background: #a170e3;
}

/* 金融機関 */
.list[data-tab=bank] .list-title {
  background: #9dc650;
}

/* 公園 */
.list[data-tab=park] .list-title {
  background: #009b43;
}

/*リストのボーダー*/
/* 商業施設 */
.list[data-tab=shop] .list-item {
  border-color: #f58d9d;
}

/* 公共施設 */
.list[data-tab=public] .list-item {
  border-color: #ffaf48;
}

/* 教育施設 */
.list[data-tab=education] .list-item {
  border-color: #61c0ef;
}

/* 医療施設 */
.list[data-tab=medical] .list-item {
  border-color: #a170e3;
}

/* 金融機関 */
.list[data-tab=bank] .list-item {
  border-color: #9dc650;
}

/* 公園 */
.list[data-tab=park] .list-item {
  border-color: #009b43;
}

/*===============================
■■　スマホ用　■■
===============================*/
/*------------(XS)------------*/
@media (min-width: 320px) and (max-width: 767px) {
  /*■　SP共有設定　■*/
  .sp-wide {
    margin: 0 auto;
    width: 100%;
    max-width: 310px;
  }
  /*■　基本設定（XS）　■*/
  .text-mi-en {
    margin-bottom: 20px;
    font-family: "Jost", sans-serif;
    font-size: 2.2rem;
    font-weight: 500;
  }
  .text-color-main {
    color: #007480;
  }
  .text-read-m {
    margin-bottom: 6px;
    font-family: "Noto Serif JP", serif;
    font-size: 1.9rem;
    line-height: 1.4;
    font-weight: 500;
  }
  .text-title-l {
    margin-bottom: 30px;
    font-family: "Noto Serif JP", serif;
    font-size: 3.2rem;
    line-height: 1.4;
    font-weight: 500;
  }
  .text-title {
    margin-bottom: 20px;
    font-family: "Noto Serif JP", serif;
    font-size: 2.6rem;
    line-height: 1.4;
    font-weight: 500;
  }
  /*■■■■■■　#0 ロケーショントップイメージ(XS)　■■■■■■■*/
  .location-fv {
    margin: 0;
    width: 100%;
    aspect-ratio: 4/6;
    overflow: hidden;
    background: #006ea1;
    -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-mode: luminance;
    mask-mode: luminance;
    -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;
  }
  .location-fv img.sp-view {
    display: block;
  }
  .location-fv img.pc-view {
    display: none;
  }
  /*タイトル*/
  .location-title {
    padding: 0;
    font-family: "Noto Serif JP", serif;
    font-size: 2.8rem;
    line-height: 1.6;
    font-weight: 500;
    color: #FFF;
    position: absolute;
    top: 15%;
    left: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    alidn-items: flex-start;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    width: 100%;
    text-shadow: 0 0 6px #2b7cdd, 0 0 12px #2b7cdd, 0 0 18px #2b7cdd, 0 0 24px #2b7cdd;
    text-align: left;
  }
  /*■■■■■■　#1 アクセス情報（XS）　■■■■■■■*/
  .bg-location {
    margin-top: -30px;
    padding: 5em 0 4em;
    position: relative;
    overflow: hidden;
  }
  /*■■■ アメーバオブジェクト ■■■*/
  .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%;
    right: -100px;
    width: 500px;
    -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: 18%;
    left: -150px;
    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: -120px;
    right: -250px;
    width: 650px;
    -webkit-animation: floatC 20s ease-in-out infinite alternate;
            animation: floatC 20s ease-in-out infinite alternate;
    -webkit-animation-duration: 22s;
            animation-duration: 22s;
  }
  /*■■■■■■　#2 近隣施設スワイパー　■■■■■■■*/
  .facility-slider {
    padding: 20px 0;
  }
  .facility-swiper-wrap {
    overflow: visible; /* ←ここ重要 */
  }
  .facility-swiper .swiper-wrapper {
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
  .facility-slider .facility-swiper .swiper-slide {
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  /* Swiper */
  .facility-slider .facility-swiper {
    padding: 0 0 40px;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    position: relative;
  }
  /* スライド幅（チラ見せ） */
  .facility-slider .facility-swiper .swiper-slide {
    width: 280px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    /*background-color:#FFF;*/
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
  }
  /* カード */
  .card {
    width: 100%;
    padding: 16px 16px 30px;
    border-radius: 12px;
    height: 100%; /* 高さ揃え */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -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;
    gap: 15px;
  }
  .card.card-green {
    background-color: #e5f4ec;
  }
  .card.card-green p.card-title {
    color: #54b77f;
  }
  .card.card-blue {
    background-color: #e4eef5;
  }
  .card.card-blue p.card-title {
    color: #4d8cbe;
  }
  .card.card-pink {
    background-color: #fce9e8;
  }
  .card.card-pink p.card-title {
    color: #ec6d65;
  }
  /* 画像 4:3 */
  .card-img {
    aspect-ratio: 4/3;
    border-radius: 10px;
  }
  .card-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  /* テキスト */
  .card-title {
    font-family: "Noto Serif JP", serif;
    font-size: 2.4rem;
    line-height: 1.2;
    fontweight: 500;
    text-align: center;
  }
  .card-title span {
    font-size: 2rem;
  }
  .card-sub {
    font-size: 1.2rem;
    color: #666;
  }
  .card-text {
    font-size: 1.3rem;
  }
  /* ★スケール制御 */
  /* 最弱 */
  .facility-swiper .swiper-slide .card {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0.4;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  /* 中間 */
  .facility-swiper .swiper-slide-prev .card,
  .facility-swiper .swiper-slide-next .card {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    opacity: 0.7;
  }
  /* 中央 */
  .facility-swiper .swiper-slide-active .card {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  .swiper-button-prev::after,
  .swiper-button-next::after {
    display: none;
  }
  /*矢印位置*/
  .custom-prev,
  .custom-next {
    width: 50px;
    min-width: 50px;
    height: 50px;
    background: #007481;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 150;
  }
  .swiper-button-next img {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  /* 位置調整 */
  .custom-prev {
    left: calc(50% - 190px); /* カード幅に合わせる */
    right: auto;
  }
  .custom-next {
    right: calc(50% - 190px);
    left: auto;
  }
  /*ページネーション*/
  .swiper-pagination {
    bottom: 10px;
  }
  .swiper-pagination-bullet {
    background: #007481;
    opacity: 0.3;
  }
  .swiper-pagination-bullet-active {
    opacity: 1;
  }
  /*■■■■■■　#3 グルメ情報(XS)　■■■■■■■*/
  .gourmet-top-round {
    position: relative;
    bottom: -1px;
    display: block;
    width: 100%;
    height: auto;
  }
  .bg-gourmet {
    padding: 2em 0 0;
    background-color: #f5eee6;
  }
  .bg-gourmet p.text-mi-en {
    color: #763b1b;
  }
  /*■■■■■■　#4 生活環境(XS)　■■■■■■■*/
  .shop-block {
    margin: 0;
    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: 30px 15px;
  }
  .shop-box {
    width: calc(50% - 10px);
    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: 5px;
  }
  .shop-img {
    position: relative;
  }
  .shop-img img {
    border-radius: 10px;
  }
  .shop-name {
    font-size: 2rem;
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
  }
  .shop-text {
    font-size: 1.1rem;
    text-align: center;
  }
  /*■　#5ライフインフォメーション　■*/
  .text-hint-pinchiout {
    margin: 0 auto 10px;
    display: block;
    text-align: center;
  }
  .text-hint-pinchiout p {
    font-family: "Noto Serif JP", serif;
    font-size: 1rem;
  }
  /* ▼ リスト */
  .list {
    padding: 32px 16px;
    display: none;
    background: #fff;
    border-radius: 6px;
  }
  .list.active {
    display: block;
  }
  .list-title {
    font-size: 1.6rem;
    background: #007481;
    color: #fff;
    padding: 5px 10px;
    font-weight: bold;
    border-radius: 6px;
  }
  /* ▼ アイテム */
  .name {
    font-size: 1.2rem;
  }
  .info {
    font-size: 1rem;
  }
} /*xs*/
/*------------(SM)------------*/
@media (min-width: 768px) and (max-width: 1023px) {
  /*■■■■■■　#0 ロケーショントップイメージ(SM)　■■■■■■■*/
  .location-fv {
    margin: 0;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #006ea1;
    -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-mode: luminance;
    mask-mode: luminance;
    -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;
  }
  .location-fv img.sp-view {
    display: none;
  }
  .location-fv img.pc-view {
    display: block;
  }
  /*タイトル*/
  .location-title {
    padding: 0 0 0 5%;
    font-family: "Noto Serif JP", serif;
    font-size: 3.8rem;
    line-height: 1.6;
    font-weight: 500;
    color: #FFF;
    position: absolute;
    top: 15%;
    left: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    alidn-items: flex-start;
    -webkit-box-pack: flec-start;
        -ms-flex-pack: flec-start;
            justify-content: flec-start;
    text-align: left;
    width: 100%;
    text-shadow: 0 0 6px #2b7cdd, 0 0 12px #2b7cdd, 0 0 18px #2b7cdd, 0 0 24px #2b7cdd;
    text-align: left;
  }
  /*■■■■■■　#3 グルメ情報(SM)　■■■■■■■*/
  .gourmet-top-round {
    position: relative;
    bottom: -1px;
    display: block;
    width: 100%;
    height: auto;
  }
  .bg-gourmet {
    padding: 2em 0 0;
    background-color: #f5eee6;
  }
  .bg-gourmet p.text-mi-en {
    color: #763b1b;
  }
} /*SM*/
/*------------(MD)------------*/
@media (min-width: 1024px) and (max-width: 1215px) {
  .facility-slider .facility-swiper .swiper-slide {
    width: auto;
  }
  /* ★スケール制御 */
  /* 全体 */
  .facility-swiper .card {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
    opacity: 1;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  /* 中央付近 */
  .facility-swiper .swiper-slide-next .card,
  .facility-swiper .swiper-slide-prev .card {
    -webkit-transform: scale(0.93);
            transform: scale(0.93);
    opacity: 1;
  }
  /* 擬似中央 */
  .facility-swiper .swiper-slide-active .card {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  /*■■■■■■　#2 グルメ情報（MD）　■■■■■■■*/
  /* ▼ リストアイテム */
  .name {
    font-size: 1.2rem;
  }
  .info {
    font-size: 1rem;
  }
}
/*------------(LG)------------*/
/*LG*/
/*------------(XL)------------*/
/*XL*/
/*------------(XXL)------------*/
@media (min-width: 1920px) {
  /*タイトル*/
  .location-title {
    font-size: 6.2rem;
    position: absolute;
    top: 15%;
    left: 0;
  }
  .tab {
    background-color: #FFF;
    border: none;
    padding: 6px 15px;
    border-radius: 20px;
    cursor: pointer;
    border: 1px solid;
    font-size: 1.8rem;
  }
} /*(XXL)*/