@charset "UTF-8";
/* =========================================
	変数
========================================= */
/* =========================================
	mixin
========================================= */
/* =========================================
  共通
========================================= */
.texture::before {
  content: "";
  background: url(../top/images/texture.png) repeat left top/contain;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  height: 100%;
}

.contents {
  position: relative;
  z-index: 10;
}

.titleArea {
  text-align: center;
}

.title .enFont {
  padding: 0 5.5rem;
  display: inline-block;
  font-size: 7rem;
  line-height: 1.15;
  color: #028f4c;
  position: relative;
}
@media screen and (max-width: 992px) {
  .title .enFont {
    font-size: 4.5rem;
    padding: 0 4.2rem;
  }
}
.title .enFont::before, .title .enFont::after {
  content: "";
  display: inline-block;
  position: absolute;
  background: url(../assets/images/titleIcon.svg) no-repeat left top/contain;
  width: 3.5rem;
  height: 3.5rem;
  top: calc(50% - 1rem);
}
@media screen and (max-width: 992px) {
  .title .enFont::before, .title .enFont::after {
    width: 2.2rem;
    height: 2.2rem;
    top: calc(50% - 0.7rem);
  }
}
.title .enFont::before {
  left: 0;
}
.title .enFont::after {
  right: 0;
  transform: scale(-1, 1);
}

.jaTitle {
  font-size: 2rem;
  font-weight: bold;
}
@media screen and (max-width: 992px) {
  .jaTitle {
    font-size: 1.8rem;
  }
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5rem;
  color: #fff;
  position: relative;
  padding: 1.4rem;
  font-size: 1.4rem;
  font-weight: 500;
  width: 100%;
  max-width: 30rem;
  background-color: #43a857;
  border-bottom: 0.4rem solid #028f4c;
  position: relative;
}
@media screen and (max-width: 992px) {
  .btn {
    max-width: 100%;
  }
}
.btn:hover {
  color: #fff;
}
.btn::after {
  content: "";
  display: inline-block;
  position: absolute;
  background: url(../assets/images/arrow.svg) no-repeat left top/contain;
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 1.7rem;
  right: 3rem;
}

/* =========================================
  FV
========================================= */
.fv {
  background: url(../top/images/fvBg01.png) no-repeat center bottom/cover;
  height: calc(100vh - 13.7rem);
  position: relative;
  background-attachment: fixed;
}
@media screen and (max-width: 768px) {
  .fv {
    background: url(../top/images/fvBg01_sp.png) no-repeat center bottom 32rem/contain;
    height: calc(100vh - 9.6rem);
    height: calc(100dvh - 9.6rem);
  }
}
.fv::after {
  content: "";
  background: url(../top/images/fvBg02.png) no-repeat center bottom/cover;
  height: 100vh;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
@media screen and (max-width: 768px) {
  .fv::after {
    background: url(../top/images/fvBg02_sp.png) no-repeat top center/cover;
    height: 42rem;
  }
}
.fv::before {
  height: 100vh;
}
@media screen and (max-width: 768px) {
  .fv::before {
    height: calc(100vh - 18rem);
    height: calc(100dvh - 18rem);
  }
}
.fv .fvWrapper {
  position: relative;
  width: 100%;
  height: calc(100vh - 13.7rem);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-width: 140rem;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .fv .fvWrapper {
    height: calc(100vh - 9.6rem);
    height: calc(100dvh - 9.6rem);
  }
}
.fv .fvWrapper::before, .fv .fvWrapper::after {
  content: "";
  display: inline-block;
  position: absolute;
  z-index: 1;
}
.fv .fvWrapper::before {
  background: url(../top/images/fvTree01.svg) no-repeat left top/contain;
  width: 11.7rem;
  height: 11.9rem;
  left: 3.6rem;
  bottom: 24rem;
}
@media screen and (max-width: 768px) {
  .fv .fvWrapper::before {
    background: url(../top/images/fvTree01_sp.svg) no-repeat left top/contain;
    width: 2.9rem;
    height: 3rem;
    left: 0.5rem;
    bottom: 18rem;
  }
}
.fv .fvWrapper::after {
  background: url(../top/images/fvTree02.svg) no-repeat left top/contain;
  width: 7.9rem;
  height: 10.6rem;
  right: 1.72rem;
  bottom: 28rem;
}
@media screen and (max-width: 768px) {
  .fv .fvWrapper::after {
    background: url(../top/images/fvTree02_sp.svg) no-repeat left top/contain;
    width: 3.5rem;
    height: 4.7rem;
    right: 0.76rem;
    bottom: 22.5rem;
  }
}
.fv .fvWrapper .fvContainer {
  position: relative;
  width: 100%;
  max-width: 140rem;
  height: 100%;
  z-index: 10;
}
.fv .blobStage {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translate(-50%);
  width: 95%;
  height: calc(100vh - 34rem);
  z-index: 5;
  filter: drop-shadow(0 2rem 4rem rgba(0, 0, 0, 0.1));
}
@media screen and (max-width: 768px) {
  .fv .blobStage {
    width: 90%;
    height: calc(100vh - 45rem);
    height: calc(100dvh - 45rem);
    top: 2rem;
  }
}
.fv .blobMask {
  width: 100%;
  height: 100%;
  overflow: hidden;
  animation: morphing 12s ease-in-out infinite;
  position: relative;
  background: #fff;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.fv .blobMask::after {
  content: "";
  position: absolute;
  bottom: -0.2rem;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(to top, white 20%, rgba(255, 255, 255, 0) 100%);
  z-index: 10;
  pointer-events: none;
}
.fv .fvSwiper {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.fv .fvSwiper .swiper-slide {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
}
.fv .slideImage {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  transform: scale(1.02);
  transition: transform 10s linear;
}
.fv .slideImage img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.fv .swiper-slide-active .slideImage {
  transform: scale(1.15);
}
.fv .catchCopyArea {
  position: absolute;
  bottom: 19rem;
  right: 3%;
  z-index: 20;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .fv .catchCopyArea {
    bottom: 34rem;
    right: 0;
    left: 0;
    text-align: center;
    margin: 0 auto;
  }
}
.fv .catchText {
  font-size: clamp(2.4rem, 4vw, 5rem);
  font-weight: 900;
  color: #028f4c;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .fv .catchText {
    font-size: clamp(2rem, 6vw, 2.6rem);
    font-size: 2.6rem;
    line-height: 1.4;
  }
}
.fv .character {
  position: absolute;
  z-index: 30;
}
.fv .charBlue {
  top: min(13rem, 5vh);
  right: 16rem;
  right: min(16rem, 24vh);
  animation: upDown01 3s ease-in-out infinite;
  transform: rotate(-10deg);
  max-width: min(10rem, 12vh);
  width: 7.3%;
}
@media screen and (max-width: 768px) {
  .fv .charBlue {
    max-width: 6rem;
    width: 100%;
    height: 6rem;
    top: 2rem;
    right: 8rem;
  }
}
.fv .charPink {
  top: min(13rem, 5vh);
  right: 6rem;
  right: min(6rem, 10vh);
  animation: upDown02 3s ease-in-out infinite;
  transform: rotate(10deg);
  max-width: min(9.3rem, 12vh);
  width: 6.8%;
}
@media screen and (max-width: 768px) {
  .fv .charPink {
    max-width: 6rem;
    width: 100%;
    height: 6rem;
    top: 1rem;
    right: 2rem;
  }
}
.fv .statusInner {
  max-width: 100rem;
  width: calc(100% - 4rem);
  position: absolute;
  bottom: 10rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
}
@media screen and (max-width: 768px) {
  .fv .statusInner {
    bottom: 14.2rem;
    width: calc(100% - 3rem);
  }
}
.fv .statusInner::before, .fv .statusInner::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: -0.75rem;
  width: 1.5rem;
  height: 9rem;
  background-color: #daba81;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .fv .statusInner::before, .fv .statusInner::after {
    top: -0.95rem;
    height: 20rem;
  }
}
.fv .statusInner::before {
  left: 3rem;
}
.fv .statusInner::after {
  right: 3rem;
}
.fv .statusBoard {
  background-image: repeating-linear-gradient(0deg, #daba81, #daba81 3px, #e8c689 3px, #e8c689 40px);
  background-position-y: 2.1rem;
  border-radius: 0.5rem;
  padding: 0.7rem 1rem;
  display: flex;
  gap: 1rem;
  height: 7.4rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .fv .statusBoard {
    background-image: repeating-linear-gradient(0deg, #daba81, #daba81 3px, #e8c689 3px, #e8c689 20px);
    background-position-y: -1rem;
    padding: 1.17rem 1rem 1.3rem;
    height: 17.1rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.8rem;
    box-sizing: border-box;
  }
}
.fv .statusBoard::before, .fv .statusBoard::after {
  content: "";
  display: inline-block;
  position: absolute;
  background: url(../top/images/grass01.svg) no-repeat bottom left/contain;
  width: 2.7rem;
  height: 1.3rem;
  bottom: -1.5rem;
}
@media screen and (max-width: 768px) {
  .fv .statusBoard::before, .fv .statusBoard::after {
    bottom: -2.4rem;
  }
}
.fv .statusBoard::before {
  left: 2.4rem;
}
.fv .statusBoard::after {
  right: 2.4rem;
}
.fv .statusLabel {
  background-color: #028f4c;
  border-radius: 0.5rem;
  max-width: 33rem;
  color: #fff;
  padding: 0 1.2rem;
  font-size: clamp(2.6rem, 3vw, 3.6rem);
  font-weight: bold;
  display: flex;
  align-items: center;
  flex: 0.4;
}
@media screen and (max-width: 768px) {
  .fv .statusLabel {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    font-size: 3.6rem;
    padding: 0.13rem;
  }
}
.fv .statusLabel::before, .fv .statusLabel::after {
  content: "";
  display: inline-block;
  position: absolute;
  background-color: #947f70;
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
  left: 3.4rem;
}
.fv .statusLabel::before {
  top: 0.1rem;
}
@media screen and (max-width: 768px) {
  .fv .statusLabel::before {
    top: 0.3rem;
  }
}
.fv .statusLabel::after {
  bottom: 0.1rem;
}
@media screen and (max-width: 768px) {
  .fv .statusLabel::after {
    bottom: 0.4rem;
  }
}
.fv .statusLabel > span {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -2rem;
}
.fv .statusLabel .today {
  margin-top: -2rem;
  max-width: 11.5rem;
  width: 38%;
}
@media screen and (max-width: 768px) {
  .fv .statusLabel .today {
    max-width: 10.1rem;
    margin-top: -1rem;
  }
}
.fv .statusLabel .smallText {
  font-size: clamp(1.4rem, 1.8vw, 2rem);
  padding-top: clamp(0.8rem, 2vw, 1.2rem);
}
@media screen and (max-width: 768px) {
  .fv .statusLabel .smallText {
    font-size: 2rem;
  }
}
.fv .tourInfo {
  background-color: #f6f2e3;
  max-width: 64rem;
  flex: 1;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.17rem;
  font-weight: bold;
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .fv .tourInfo {
    max-width: 100%;
    padding: 0.9rem 0 1rem;
    flex-direction: column;
    gap: 0.4rem;
  }
}
.fv .tourInfo::before, .fv .tourInfo::after {
  content: "";
  display: inline-block;
  position: absolute;
  background-color: #947f70;
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
  right: 3.5rem;
}
.fv .tourInfo::before {
  top: 0.1rem;
}
@media screen and (max-width: 768px) {
  .fv .tourInfo::before {
    top: 0.3rem;
  }
}
.fv .tourInfo::after {
  bottom: 0.05rem;
}
@media screen and (max-width: 768px) {
  .fv .tourInfo::after {
    bottom: 0.4rem;
  }
}
.fv .tourInfo .tour {
  color: #028f4c;
  position: relative;
}
@media screen and (max-width: 768px) {
  .fv .tourInfo .tour {
    font-size: 2rem;
  }
}
.fv .tourInfo .tour:before {
  content: "";
  display: inline-block;
  background: url(../top/images/flag.svg) no-repeat left top/contain;
  width: 2rem;
  height: 2.3rem;
  margin-right: 0.99rem;
  vertical-align: -0.2rem;
}
.fv .tourInfo .time {
  position: relative;
}
@media screen and (max-width: 1024px) {
  .fv .tourInfo .time {
    font-size: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .fv .tourInfo .time {
    font-size: 1.6rem;
  }
}
.fv .tourInfo .time::before {
  content: "";
  display: inline-block;
  background: url(../top/images/clock.svg) no-repeat left top/contain;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 0.9rem;
  vertical-align: -0.3rem;
}
@media screen and (max-width: 768px) {
  .fv .tourInfo .time::before {
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
  }
}
/*.fv .importantNews {
  background-color: #fff;
  color: #36393E;
  border-radius: 1rem;
  padding: 2.2rem;
  display: flex;
  align-items: center;
  gap: 3rem;
  max-width: 120rem;
  margin-inline: auto;
  position: absolute;
  width: calc(100% - 4rem);
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.5rem;
}
@media screen and (max-width: 768px) {
  .fv .importantNews {
    flex-direction: column;
    align-items: normal;
    padding: 1rem 2rem 1.5rem;
    gap: 0.5rem;
    width: calc(100% - 3rem);
    bottom: 0.6rem;
  }
}
.fv .importantLabel {
  color: #e01313;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  white-space: nowrap;
}
.fv .importantLabel::before {
  content: "";
  display: inline-block;
  background: url(../top/images/newsCaution.svg) no-repeat left top/contain;
  width: 2rem;
  height: 2rem;
}
.fv .importantContent {
  display: flex;
  gap: 2rem;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .fv .importantContent {
    align-items: flex-start;
  }
}
.fv .importantContent time {
  font-size: 1.2rem;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .fv .importantContent {
    flex-direction: column;
    gap: 0.5rem;
  }
}
.fv .importantText {
  font-weight: bold;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fv:not(:has(.importantNews)) {
  background-position: center bottom -15rem;
}
@media screen and (max-width: 768px) {
  .fv:not(:has(.importantNews)) {
    background-position: center bottom 20rem;
  }
}
@media screen and (min-width: 769px) {
  .fv:not(:has(.importantNews)):after {
    bottom: -7rem;
  }
}
@media screen and (max-width: 768px) {
  .fv:not(:has(.importantNews)):after {
    height: 31rem;
  }
}
.fv:not(:has(.importantNews)) .fvWrapper:before {
  bottom: 17rem;
}
@media screen and (max-width: 768px) {
  .fv:not(:has(.importantNews)) .fvWrapper:before {
    bottom: 7rem;
  }
}
.fv:not(:has(.importantNews)) .fvWrapper::after {
  bottom: 22rem;
}
@media screen and (max-width: 768px) {
  .fv:not(:has(.importantNews)) .fvWrapper::after {
    bottom: 11.5rem;
  }
}
.fv:not(:has(.importantNews)) .blobStage {
  height: calc(100vh - 28rem);
}
@media screen and (max-width: 768px) {
  .fv:not(:has(.importantNews)) .blobStage {
    height: calc(100vh - 33rem);
    height: calc(100dvh - 33rem);
  }
}
.fv:not(:has(.importantNews)) .catchCopyArea {
  bottom: 12rem;
}
@media screen and (max-width: 768px) {
  .fv:not(:has(.importantNews)) .catchCopyArea {
    bottom: 23.5rem;
  }
}
.fv:not(:has(.importantNews)) .statusInner {
  bottom: 2rem;
}
@media screen and (max-width: 768px) {
  .fv:not(:has(.importantNews)) .statusInner {
    bottom: 3rem;
  }
}
*/
/* ==================================================
   重要なお知らせエリア (fv内) - カルーセル版_2026.6.4
   ================================================== */
.fv .importantNews {
	background-color: #fff;
	color: #36393E;
	border-radius: 1rem;
	padding: 1.5rem 2.2rem;
	display: flex;
	align-items: center;
	gap: 3rem;
	max-width: 120rem;
	margin-inline: auto;
	position: absolute;
	width: calc(100% - 4rem);
	left: 50%;
	transform: translateX(-50%);
	bottom: 0.5rem;
	z-index: 10; /* 他のFV要素と重ならないよう調整 */
}

.fv .importantNewsSwiper {
	width: 100%;
	height: 5rem; /* 1行分の高さに固定 */
	overflow: hidden;
}

@media screen and (max-width: 768px) {
	.fv .importantNews {
		padding: 1rem 1.5rem;
		width: calc(100% - 3rem);
		flex-direction: column;
		gap: 1rem;
		bottom: 0.6rem;
	}
}

/* ラベル設定 */
.fv .importantLabel {
	color: #e01313;
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 1rem;
	white-space: nowrap;
	flex-shrink: 0;
}
.fv .importantLabel::before {
	content: "";
	display: inline-block;
	background: url(../top/images/newsCaution.svg) no-repeat left top/contain;
	width: 2rem;
	height: 2rem;
}

/* 記事リンク部分 */
.fv .importantContent {
	display: flex;
	gap: 2rem;
	align-items: center;
	text-decoration: none;
	color: inherit;
	height: 100%;
}
.fv .importantContent time {
	font-size: 1.2rem;
	font-weight: bold;
	white-space: nowrap;
}
.fv .importantText {
	font-weight: bold;
	white-space: normal;
	overflow: hidden; 
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	width: 100%;
}

/* ==================================================
   :has() セレクタによる動的レイアウト
   ================================================== */
.fv:not(:has(.importantNews)) {
  background-position: center bottom -15rem;
}
@media screen and (max-width: 768px) {
  .fv:not(:has(.importantNews)) {
    background-position: center bottom 20rem;
  }
}
@media screen and (min-width: 769px) {
  .fv:not(:has(.importantNews)):after {
    bottom: -7rem;
  }
}
@media screen and (max-width: 768px) {
  .fv:not(:has(.importantNews)):after {
    height: 31rem;
  }
}
.fv:not(:has(.importantNews)) .fvWrapper:before {
  bottom: 17rem;
}
@media screen and (max-width: 768px) {
  .fv:not(:has(.importantNews)) .fvWrapper:before {
    bottom: 7rem;
  }
}
.fv:not(:has(.importantNews)) .fvWrapper::after {
  bottom: 22rem;
}
@media screen and (max-width: 768px) {
  .fv:not(:has(.importantNews)) .fvWrapper::after {
    bottom: 11.5rem;
  }
}
.fv:not(:has(.importantNews)) .blobStage {
  height: calc(100vh - 28rem);
}
@media screen and (max-width: 768px) {
  .fv:not(:has(.importantNews)) .blobStage {
    height: calc(100vh - 33rem);
    height: calc(100dvh - 33rem);
  }
}
.fv:not(:has(.importantNews)) .catchCopyArea {
  bottom: 12rem;
}
@media screen and (max-width: 768px) {
  .fv:not(:has(.importantNews)) .catchCopyArea {
    bottom: 23.5rem;
  }
}
.fv:not(:has(.importantNews)) .statusInner {
  bottom: 2rem;
}
@media screen and (max-width: 768px) {
  .fv:not(:has(.importantNews)) .statusInner {
    bottom: 3rem;
  }
}
/* =========================================
  お知らせ
========================================= */
@media screen and (max-width: 992px) {
  .news {
    background-color: #89c676;
  }
}
.news .newsArea {
  position: relative;
  background-color: #89c676;
  padding: 6rem 2rem 18rem;
}
@media screen and (max-width: 992px) {
  .news .newsArea {
    padding: 3rem 1.5rem 3.5rem;
  }
}
.news .newsInner {
  position: relative;
  max-width: 124rem;
  margin-inline: auto;
  padding-inline: 2rem;
}
@media screen and (max-width: 992px) {
  .news .newsInner {
    padding-inline: 1.5rem;
  }
}
@media screen and (min-width: 769px) {
  .news .newsInner::after {
    content: "";
    display: inline-block;
    position: absolute;
    background: url(../top/images/grass02.svg) no-repeat left top/contain;
    width: 4rem;
    height: 3.6rem;
    bottom: -1rem;
    right: 8.5rem;
  }
}
.news .leadText {
  text-align: center;
  color: #fff;
  line-height: 1.75;
  font-weight: 500;
  font-size: clamp(2.2rem, 1.8vw, 2.4rem);
}
@media screen and (max-width: 992px) {
  .news .leadText {
    text-align: left;
    font-size: 1.8rem;
    line-height: 1.66;
  }
}
.news .newsContainer {
  position: relative;
}
.news .newsContainer::after {
  content: "";
  display: inline-block;
  position: absolute;
  background-color: #89C676;
  height: 100%;
  width: 100%;
  left: 0;
  bottom: 22rem;
}
.news .newsContainer .newsInner {
  display: grid;
  grid-template-columns: 32rem 1fr;
  gap: 10rem;
  align-items: start;
  position: relative;
  top: -11rem;
}
@media screen and (max-width: 992px) {
  .news .newsContainer .newsInner {
    gap: 0;
    grid-template-columns: 1fr;
    top: 0;
  }
}
@media screen and (min-width: 769px) {
  .news .newsContainer .newsInner::after {
    width: 2.9rem;
    height: 2.6rem;
    bottom: -6.1rem;
    left: 0.5rem;
    z-index: 1;
  }
}
.news .newsHeader {
  position: relative;
}
@media screen and (max-width: 992px) {
  .news .newsHeader {
    text-align: center;
  }
}
@media screen and (max-width: 992px) {
  .news .newsHeader .title {
    margin-bottom: 0.8rem;
  }
}
.news .newsHeader .enFont {
  color: #0f653a;
}
.news .newsHeader .jaTitle {
  color: #0f653a;
  margin-bottom: 5rem;
}
@media screen and (max-width: 992px) {
  .news .newsHeader .jaTitle {
    margin-bottom: 2rem;
  }
}
.news .newsList {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.news .newsItem {
  background-color: #fff;
  border-radius: 1rem;
  padding: 2.2rem 3rem;
  color: #000;
  display: block;
}
@media screen and (max-width: 992px) {
  .news .newsItem {
    padding: 2rem;
  }
}
.news .newsMeta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.news .newsDate {
  font-size: 1.2rem;
  font-weight: 500;
  color: #000;
}
.news .newsCat {
  font-size: 1.2rem;
  color: #fff;
  padding: 0.1rem 0.9rem 0.2rem;
  border-radius: 0.4rem;
  font-weight: bold;
}
.news .cat01 {
  background-color: #ff8f12;
}
.news .cat02 {
  background-color: #0166ca;
}
.news .newsContent {
  margin-bottom: 1rem;
  font-size: clamp(1.5rem, 1.5vw, 1.6rem);
  font-weight: bold;
  line-height: 1.56;
}
.news .eventday {
  font-size: clamp(1.3rem, 1.2vw, 1.4rem);
  font-weight: bold;
  line-height: 1.56;
}
@media screen and (max-width: 992px) {
  .news .newsContent {
    font-size: 1.6rem;
  }
}
.news .btn {
  background-color: #028f4c;
  border-bottom: 0.4rem solid #0f653a;
}
@media screen and (max-width: 992px) {
  .news .btn {
    margin: 3rem auto 0;
    width: calc(100% - 4.5rem);
  }
}

/* =========================================
  開催日カレンダ-
========================================= */
.calendar {
  position: relative;
  width: 100%;
  top: -23.8rem;
  padding-bottom: 1.3rem;
  margin-bottom: -23.8rem;
}
@media screen and (max-width: 992px) {
  .calendar {
    top: -0.1rem;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}
.calendar::before {
  content: "";
  display: inline-block;
  background: url(../top/images/calendarBg.svg) no-repeat bottom left/cover;
  width: 100%;
  height: clamp(30vh, 18vw, 80vh);
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-width: 992px) {
  .calendar::before {
    background-image: url(../top/images/calendarBg_sp.svg);
    height: clamp(12vh, 18vw, 20vh);
  }
}
.calendar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 21.6rem;
  background-color: #c6deab;
  z-index: -1;
}
@media screen and (max-width: 992px) {
  .calendar::after {
    height: 27rem;
  }
}
.calendar .titleArea {
  margin-bottom: 3rem;
}
.calendar .calendarWrapper {
  max-width: 186rem;
  margin-inline: auto;
  position: relative;
  padding: 20rem 2rem 0;
}
@media screen and (max-width: 992px) {
  .calendar .calendarWrapper {
    padding: 8rem 1.5rem 0;
  }
}
.calendar .calendarWrapper::before, .calendar .calendarWrapper::after {
  content: "";
  position: absolute;
}
@media screen and (max-width: 992px) {
  .calendar .calendarWrapper::before, .calendar .calendarWrapper::after {
    content: none;
  }
}
.calendar .calendarWrapper::before {
  left: 8.9rem;
  background: url(../top/images/calendarTree01.svg) no-repeat left top/contain;
  width: 9.6rem;
  height: 12.7rem;
  bottom: 18.5rem;
}
.calendar .calendarWrapper::after {
  right: 5.2rem;
  background: url(../top/images/calendarTree02.svg) no-repeat left top/contain;
  width: 18.7rem;
  height: 19.1rem;
  bottom: 18.5rem;
}
.calendar .calendarInnerContainer {
  width: 95rem;
  max-width: 100%;
  margin: 0 auto;
}
.calendar .calendarInnerContainer .treeLeft,
.calendar .calendarInnerContainer .treeRight {
  position: absolute;
  z-index: -1;
}
.calendar .calendarInnerContainer .treeLeft {
  top: 6rem;
  left: -23rem;
  max-width: 36.6rem;
  height: 46.1rem;
  transform: rotate(45deg);
  top: 40rem;
  left: -4rem;
  width: 20%;
}
@media screen and (max-width: 768px) {
  .calendar .calendarInnerContainer .treeLeft {
    width: 14rem;
    height: 17.6rem;
    top: 8rem;
    left: -12.5rem;
    top: 21rem;
    left: -3.2rem;
    transform: rotate(20deg);
  }
}
.calendar .calendarInnerContainer .treeRight {
  top: -15rem;
  right: -16rem;
  max-width: 48.3rem;
  height: 60.9rem;
  transform: rotate(-71deg);
  right: 2rem;
  top: 7rem;
  background-position: center right;
  width: 26%;
}
@media screen and (max-width: 768px) {
  .calendar .calendarInnerContainer .treeRight {
    display: none;
  }
}
.calendar .calendarContent {
  position: relative;
}
@media screen and (min-width: 769px) {
  .calendar .calendarContent::before {
    content: "";
    display: inline-block;
    position: absolute;
    background: url(../top/images/grass02.svg) no-repeat left top/contain;
    width: 3rem;
    height: 2.7rem;
    bottom: 8.11rem;
    left: -5.18rem;
  }
}

/* カレンダー　団体予約状況表　2026.06.11追記 */
.calendar .reserve-status {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin-left: auto;
	width: fit-content;
}
.calendar .reserve-status p {
	text-align: center;
	width: 100%;
	padding: 4px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-bottom: none;
	color: #028f4c;
	font-weight: bold;
}
.calendar .reserve-table {
	margin-bottom: 20px;
	border-collapse: collapse;
	color: #36393E;
	font-size: clamp(1.3rem, 1.2vw, 1.4rem);
	font-weight: bold;
}
.calendar .reserve-table td {
	padding: 4px 8px;
	border: 1px solid #ccc;
	background-color: #d6e7c6 ;
}
.calendar .reserve-table td:first-child {
	text-align: center;
	width: 40px;
	background-color: #1a8b41 ;
	color: #fff !important;
}


.calendar .monthNav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5.5rem;
  margin-bottom: 2rem;
}
@media screen and (max-width: 992px) {
  .calendar .monthNav {
    gap: 4rem;
  }
}
.calendar .monthText {
  font-family: "Outfit", sans-serif;
  font-size: 4rem;
  line-height: 1.25;
  font-weight: 500;
  color: #36393E;
}
@media screen and (max-width: 992px) {
  .calendar .monthText {
    font-size: 3rem;
    line-height: 0.83;
  }
}
.calendar .navArrow {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: #43a857;
  cursor: pointer;
  position: relative;
  transition: opacity 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 992px) {
  .calendar .navArrow {
    width: 2.5rem;
    height: 2.5rem;
  }
}
.calendar .navArrow:hover {
  opacity: 0.8;
}
.calendar .prevArrow img {
  transform: scale(-1, 1);
  width: 1rem;
}
.calendar .scrollWrapper {
  position: relative;
  width: 100%;
}
@media screen and (max-width: 950px) {
  .calendar .scrollWrapper {
    overflow-x: auto;
    padding-right: 1.5rem;
    scrollbar-width: none;
  }
  .calendar .scrollWrapper::-webkit-scrollbar {
    display: none;
  }
}
.calendar .calendarTable {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #fff;
  table-layout: fixed;
  border: 0.1rem solid #e8e8e8;
}
@media screen and (max-width: 950px) {
  .calendar .calendarTable {
    width: 95rem;
  }
}
.calendar .calendarTable td:nth-child(6) .dateNum {
  color: #2794ec;
}
.calendar .calendarTable td:nth-child(7) .dateNum {
  color: #e01313;
}
.calendar .thCell,
.calendar .tdCell {
  border: 1px solid #ccc;
}
.calendar .thCell {
  background-color: #1a8b41;
  color: #fff;
  padding: 0.7rem 0;
  text-align: center;
  font-weight: 500;
  font-size: 1.6rem;
}
.calendar .tdCell {
  height: 10.5rem;
}
.calendar .dateNum {
  text-align: center;
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  color: #1a8b41;
  height: 3.5rem;
  font-weight: 700;
  background-color: #d6e7c6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendar .cellContent {
  height: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}
.calendar .cellContent.isClosed {
  background-color: #ebebeb;
  color: #e01313;
  font-size: 1.6rem;
  font-weight: 500;
}
.calendar .scrollOverlay {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 1rem;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 10;
  padding: 0.65rem 1rem 0.3rem;
  width: 12rem;
}
@media screen and (max-width: 950px) {
  .calendar .scrollOverlay {
    display: flex;
  }
}
.calendar .scrollIcon {
  width: 5.5rem;
  height: 5.8rem;
  margin-bottom: 0.5rem;
  background: url(../top/images/scrollIcon.svg) no-repeat left top/contain;
}
.calendar .calButtonArea {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  margin-top: 4rem;
}
@media screen and (max-width: 950px) {
  .calendar .calButtonArea {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
}
.calendar .bottomLinkArea {
  text-align: center;
  margin-top: 4rem;
}
@media screen and (max-width: 950px) {
  .calendar .bottomLinkArea {
    padding-right: 1.5rem;
    margin-top: 3rem;
  }
}
.calendar .textLink {
  color: #028f4c;
  font-weight: bold;
  font-size: 1.8rem;
  position: relative;
  padding-right: 5rem;
}
.calendar .textLink::before, .calendar .textLink::after {
  content: "";
  display: inline-block;
}
.calendar .textLink::before {
  background-color: #028f4c;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  position: absolute;
  right: 0;
  top: calc(50% - 1.5rem);
}
.calendar .textLink::after {
  background: url(../assets/images/arrow.svg) no-repeat left top/contain;
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 1.7rem;
  position: absolute;
  right: 0.9rem;
  top: calc(50% - 0.6rem);
}
.calendar .textLink:hover {
  opacity: 0.7;
}
@media screen and (max-width: 950px) {
  .calendar .calButtonArea {
    padding-right: 1.5rem;
  }
  .calendar .calButtonArea .btn {
    width: calc(100% - 7.6rem);
  }
}

/* =========================================
  学ぼう
========================================= */
.learn {
  position: relative;
  padding-top: 12.5rem;
}
@media screen and (max-width: 992px) {
  .learn {
    padding: 4rem 0 5rem;
    top: -0.1rem;
  }
}
.learn:before {
  content: "";
  display: inline-block;
  position: absolute;
  background: url(../top/images/learnBg.svg) no-repeat bottom left/cover;
  width: 100%;
  height: clamp(11.2vh, 8vw, 30vh);
  left: 0;
  top: 0;
}
@media screen and (max-width: 992px) {
  .learn:before {
    background-image: url(../top/images/learnBg_sp.svg);
    height: 7.5rem;
  }
}
.learn .learnContainer {
  max-width: 124rem;
  margin-inline: auto;
  padding-inline: 2rem;
  position: relative;
}
@media screen and (max-width: 992px) {
  .learn .learnContainer {
    padding-inline: 1.5rem;
  }
}
@media screen and (max-width: 992px) {
  .learn .learnContainer::before {
    content: "";
    display: inline-block;
    position: absolute;
    background: url(../top/images/calendarTree01.svg) no-repeat left top/contain;
    width: 4.4rem;
    height: 5.9rem;
    top: -1rem;
    left: 4.9rem;
    z-index: 10;
  }
}
@media screen and (min-width: 769px) {
  .learn .learnContainer::after {
    content: "";
    display: inline-block;
    position: absolute;
    background: url(../top/images/grass02.svg) no-repeat left top/contain;
    width: 3rem;
    height: 2.7rem;
    top: -14.5rem;
    right: 8.5rem;
  }
}
.learn .titleWrapper {
  text-align: center;
  color: #028f4c;
  font-weight: 900;
  font-size: clamp(2.2rem, 3.5vw, 3.3rem);
  line-height: 1.87;
  margin-bottom: 3.6rem;
}
@media screen and (max-width: 992px) {
  .learn .titleWrapper {
    padding-top: 8rem;
  }
}
.learn .titleWrapper::before, .learn .titleWrapper::after {
  content: "";
  display: inline-block;
  position: absolute;
}
@media screen and (min-width: 993px) {
  .learn .titleWrapper::before, .learn .titleWrapper::after {
    animation: scaleUpDown01 3s ease-in-out infinite;
  }
}
.learn .titleWrapper::before {
  background: url(../assets/images/poppo.png) no-repeat left top/contain;
  width: 11rem;
  height: 11.8rem;
  left: 1.3rem;
  top: -11.8rem;
}
@media screen and (max-width: 992px) {
  .learn .titleWrapper::before {
    width: 5.1rem;
    height: 5.5rem;
    left: auto;
    right: 9.3rem;
    top: -1.6rem;
  }
}
.learn .titleWrapper::after {
  background: url(../assets/images/pippi.png) no-repeat left top/contain;
  width: 10.7rem;
  height: 11.7rem;
  left: 11rem;
  top: -3.8rem;
}
@media screen and (max-width: 992px) {
  .learn .titleWrapper::after {
    width: 4.2rem;
    height: 5.4rem;
    left: auto;
    right: 4.8rem;
    top: 0;
  }
}
.learn .titleWrapper img {
  display: inline;
  margin-bottom: -1.5rem;
}
@media screen and (max-width: 992px) {
  .learn .titleWrapper img {
    width: 12rem;
    margin-bottom: -1rem;
  }
}
.learn .titleText01 {
  margin-bottom: 1rem;
}
.learn .largeText {
  font-size: clamp(3.2rem, 6vw, 4.6rem);
  line-height: 1.3;
  letter-spacing: 0;
}
@media screen and (max-width: 992px) {
  .learn .largeText {
    font-size: 3rem;
  }
}
.learn .smallText {
  margin-inline: 0.5rem;
}
@media screen and (max-width: 992px) {
  .learn .smallText {
    font-size: 2.4rem;
    margin-inline: 0.2rem;
  }
}
.learn .titleText02 {
  display: block;
}
.learn .marker {
  position: relative;
}
.learn .marker::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 0.5rem;
  background-color: #f8cf3f;
  height: 1.2rem;
  width: 100%;
  z-index: -1;
}
@media screen and (max-width: 992px) {
  .learn .marker::after {
    bottom: 0.2rem;
  }
}
.learn .learnBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 20;
  text-align: center;
  gap: 3rem;
}
@media screen and (max-width: 992px) {
  .learn .learnBox {
    flex-direction: column;
    gap: 2rem;
  }
}
.learn .learnBox:hover {
  opacity: 1;
}
@media screen and (min-width: 769px) {
  .learn .learnBox:hover .learnImage {
    transform: scale(1.1);
  }
}
.learn .learnBox:hover .btn {
  opacity: 0.8;
}
@media screen and (min-width: 993px) {
  .learn .learnBox:nth-child(even) {
    flex-direction: row-reverse;
  }
}
.learn .learnBox .learnImage {
  position: relative;
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.learn .learnBox .learnImage::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.learn .learnBox .learnImage img {
  width: 100%;
  position: relative;
  z-index: 10;
}
.learn .learnBox .btn {
  transition: all 0.3s;
}
.learn .learnContent {
  width: 40%;
}
@media screen and (max-width: 992px) {
  .learn .learnContent {
    width: 100%;
    text-align: center;
  }
}
@media screen and (max-width: 992px) {
  .learn .learnBox01 {
    padding-bottom: 3.6rem;
  }
}
.learn .learnBox01 .learnImage {
  margin-right: -16.1rem;
}
.learn .learnBox01 .learnImage img {
  max-width: 91.2rem;
}
@media screen and (max-width: 992px) {
  .learn .learnBox01 .learnImage img {
    width: 76%;
  }
}
.learn .learnBox01 .learnImage::after {
  background: url(../top/images/learn01Bg.png) no-repeat left top/contain;
  max-width: 91.2rem;
  height: 66.5rem;
}
@media screen and (max-width: 992px) {
  .learn .learnBox01 .learnImage::after {
    width: 76%;
  }
}
@media screen and (max-width: 992px) {
  .learn .learnBox02 {
    margin-bottom: 4.32rem;
  }
}
.learn .learnBox02 .learnImage {
  margin-left: -8.5rem;
}
@media screen and (max-width: 992px) {
  .learn .learnBox02 .learnImage {
    margin-left: -3.5rem;
  }
}
.learn .learnBox02 .learnImage img {
  max-width: 77.8rem;
}
.learn .learnBox02 .learnImage::after {
  background: url(../top/images/learn02Bg.png) no-repeat left top/contain;
  max-width: 77.8rem;
  height: 57rem;
}
@media screen and (min-width: 993px) {
  .learn .learnBox02 .learnContent {
    padding-right: 11.2rem;
  }
}
.learn .learnBox03 .learnImage {
  margin-right: -3.9rem;
}
.learn .learnBox03 .learnImage img {
  max-width: 77.8rem;
}
.learn .learnBox03 .learnImage::after {
  background: url(../top/images/learn03Bg.png) no-repeat left top/contain;
  max-width: 78rem;
  height: 61.4rem;
}
@media screen and (min-width: 993px) {
  .learn .learnBox03 .learnContent {
    padding-left: 4.9rem;
  }
}
.learn .learnTitle {
  font-size: clamp(3rem, 2.5vw, 4rem);
  color: #028f4c;
  line-height: 1.25;
  margin-bottom: 3rem;
  font-weight: bold;
}
@media screen and (max-width: 992px) {
  .learn .learnTitle {
    font-size: 2.4rem;
    margin-bottom: 2rem;
  }
}
.learn .learnText {
  font-size: 2rem;
  font-size: clamp(1.6rem, 1.4vw, 2rem);
  line-height: 1.8;
  font-weight: bold;
  margin-bottom: 5rem;
  color: #36393E;
}
@media screen and (max-width: 992px) {
  .learn .learnText {
    font-size: 1.6rem;
    margin-bottom: 3rem;
  }
}
@media screen and (max-width: 768px) {
  .learn .learnText {
    text-align: left;
  }
}
.learn .btn {
  margin-inline: auto;
}
@media screen and (max-width: 992px) {
  .learn .btn {
    width: calc(100% - 7.6rem);
  }
}

/* =========================================
  見学の予約について
========================================= */
.reservation {
  background-color: #c6deab;
  padding: 7rem 0 6.6rem;
  position: relative;
}
@media screen and (min-width: 993px) {
  .reservation {
    top: -5rem;
    margin-bottom: -5rem;
  }
}
@media screen and (max-width: 768px) {
  .reservation {
    padding: 4rem 0;
  }
}
.reservation::after {
  content: "";
  display: inline-block;
  position: absolute;
  background: url(../top/images/reservationBg.svg) no-repeat top left/cover;
  width: 110.6%;
  height: clamp(15vh, 13vw, 22vh);
  left: -5.03%;
  bottom: 0;
}
@media screen and (max-width: 992px) {
  .reservation::after {
    background: url(../top/images/reservationBg_sp.svg) no-repeat center/cover;
    height: 29rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    bottom: -5rem;
  }
}
.reservation .titleArea {
  margin-bottom: 6rem;
}
@media screen and (max-width: 992px) {
  .reservation .titleArea {
    margin-bottom: 3.6rem;
  }
}

.reservationContainer {
  max-width: 124rem;
  margin-inline: auto;
  padding-inline: 2rem;
  position: relative;
}
@media screen and (max-width: 992px) {
  .reservationContainer {
    padding-inline: 1.5rem;
  }
}
.reservationContainer .title {
  display: inline-block;
  position: relative;
}
.reservationContainer .title::before, .reservationContainer .title::after {
  content: "";
  display: inline-block;
  position: absolute;
}
.reservationContainer .title::before {
  background: url(../top/images/reservationIcon01.svg) no-repeat left top/contain;
  width: 16.2rem;
  height: 3.4rem;
  top: 0.72rem;
  left: -23.5rem;
  animation: rightLeft01 3s ease-in-out infinite;
}
@media screen and (max-width: 992px) {
  .reservationContainer .title::before {
    left: -6rem;
    top: -2rem;
    width: 9.3rem;
    height: 2rem;
  }
}
.reservationContainer .title::after {
  background: url(../top/images/reservationIcon02.svg) no-repeat left top/contain;
  width: 13.4rem;
  height: 3.9rem;
  bottom: -2.6rem;
  right: -19.7rem;
  z-index: -1;
  animation: leftRight01 3s ease-in-out infinite;
}
@media screen and (max-width: 992px) {
  .reservationContainer .title::after {
    right: -4.5rem;
    bottom: -4rem;
    width: 9.4rem;
    height: 2.7rem;
  }
}

.reservationWrap {
  display: flex;
  gap: 4rem;
  justify-content: center;
}
@media screen and (max-width: 992px) {
  .reservationWrap {
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }
}
.reservationWrap .reservationBox {
  width: 50%;
  display: flex;
  flex-direction: column;
  position: relative;
}
@media screen and (max-width: 992px) {
  .reservationWrap .reservationBox {
    width: 100%;
  }
}
.reservationWrap .reservationBox::before, .reservationWrap .reservationBox::after {
  content: "";
  display: inline-block;
  position: absolute;
}
.reservationWrap .reservationBox .reservationHeader {
  border-top-left-radius: 2.5rem;
  border-top-right-radius: 2.5rem;
  padding: 2.3rem 1rem;
  text-align: center;
  color: #fff;
  font-size: clamp(2rem, 2.5vw, 2.4rem);
  font-weight: bold;
}
@media screen and (max-width: 992px) {
  .reservationWrap .reservationBox .reservationHeader {
    font-size: 2.4rem;
    padding: 1.7rem 1rem 1.8rem;
  }
}
.reservationWrap .reservationBox .reservationContent {
  background-color: #fff;
  border-bottom-right-radius: 2.5rem;
  border-bottom-left-radius: 2.5rem;
  padding: 3rem 3rem 4.3rem;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 992px) {
  .reservationWrap .reservationBox .reservationContent {
    padding: 2rem 2rem 2.3rem;
  }
}
.reservationWrap .reservationBox .reservationTitle {
  color: #2f7627;
  font-size: clamp(1.6rem, 2vw, 2rem);
  font-weight: 700;
  margin-bottom: 3rem;
}
@media screen and (max-width: 992px) {
  .reservationWrap .reservationBox .reservationTitle {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
}
.reservationWrap .reservationBox .reservationDesc {
  font-size: clamp(1.4rem, 1.8vw, 1.6rem);
  line-height: 1.87;
  text-align: left;
  margin-bottom: 4rem;
  color: #36393E;
  flex-grow: 1;
}
@media screen and (max-width: 992px) {
  .reservationWrap .reservationBox .reservationDesc {
    font-size: 1.6rem;
    margin-bottom: 3rem;
  }
}
.reservationWrap .reservationBox .btn {
  margin-inline: auto;
}
@media screen and (max-width: 992px) {
  .reservationWrap .reservationBox .btn {
    min-width: 100%;
    width: 100%;
  }
}
.reservationWrap .reservationBox.pattern01::before {
  background: url(../assets/images/poppo.png) no-repeat left top/contain;
  width: 11rem;
  height: 11.8rem;
  left: 4.75rem;
  top: -8.1rem;
  animation: scaleUpDown01 3s ease-in-out infinite;
}
@media screen and (max-width: 992px) {
  .reservationWrap .reservationBox.pattern01::before {
    width: 6.9rem;
    height: 7.5rem;
    left: 0.25rem;
    top: -3.8rem;
  }
}
.reservationWrap .reservationBox.pattern01 .reservationHeader {
  background-color: #43a857;
}
.reservationWrap .reservationBox.pattern02::before {
  background: url(../assets/images/pippi.png) no-repeat left top/contain;
  width: 10.7rem;
  height: 11.7rem;
  right: 1.5rem;
  top: -7.5rem;
  animation: upDown02 3s ease-in-out infinite;
}
@media screen and (max-width: 992px) {
  .reservationWrap .reservationBox.pattern02::before {
    width: 6rem;
    height: 8rem;
    right: 0.5rem;
    top: -1.5rem;
  }
}
.reservationWrap .reservationBox.pattern02 .reservationHeader {
  background-color: #009978;
}
.reservationWrap .reservationBox.pattern02 .reservationTitle {
  color: #009978;
}
.reservationWrap .reservationBox.pattern02 .btn {
  background-color: #009978;
}

.sliderArea {
  background-color: #efebe0;
  padding: 5rem 2rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sliderArea {
    padding: 3.7rem 0;
  }
}

.swiperContainer {
  position: relative;
  max-width: 123rem;
  margin: 0 auto;
  padding: 0 6rem;
}
@media screen and (max-width: 768px) {
  .swiperContainer {
    padding: 0;
    width: 100%;
  }
}

.slideItem {
  width: 100%;
  height: 15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .slideItem {
    height: 14.1rem;
  }
}
.slideItem:hover {
  color: #fff;
}
.slideItem img {
  border-radius: 1rem;
}

.slideText {
  font-size: clamp(1.4rem, 1.5vw, 1.6rem);
  font-weight: 700;
  line-height: 1.4;
  position: absolute;
  padding: 0 1rem;
}

.res-swiper-button-next,
.res-swiper-button-prev {
  width: 3rem;
  height: 3rem;
  background: #028f4c;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  transition: all 0.3s;
}
@media screen and (max-width: 768px) {
  .res-swiper-button-next,
  .res-swiper-button-prev {
    display: none;
  }
}
.res-swiper-button-next::after,
.res-swiper-button-prev::after {
  content: "";
  display: inline-block;
  position: absolute;
  background: url(../assets/images/arrow.svg) no-repeat center/contain;
  width: 1.2rem;
  height: 1.2rem;
}
.res-swiper-button-next:hover,
.res-swiper-button-prev:hover {
  opacity: 0.8;
}

.res-swiper-button-prev {
  left: 0;
}
.res-swiper-button-prev::after {
  transform: scale(-1, 1);
}

.res-swiper-button-next {
  right: 0;
}

/* =========================================
  アクセス
========================================= */
/* fv マスク*/
@keyframes morphing {
  0%, 100% {
    border-radius: 42% 58% 70% 30%/45% 45% 55% 55%;
  }
  25% {
    border-radius: 70% 30% 46% 54%/30% 29% 71% 70%;
  }
  50% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  75% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
}
@keyframes upDown01 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.5rem);
  }
}
@keyframes upDown02 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(1.5rem);
  }
}
@keyframes scaleUpDown01 {
  0%, 100% {
    transform: scale(-1, 1) translateY(0);
  }
  50% {
    transform: scale(-1, 1) translateY(-1.5rem);
  }
}
@keyframes scaleUpDown02 {
  0%, 100% {
    transform: scale(-1, 1) translateY(0);
  }
  50% {
    transform: scale(-1, 1) translateY(1.5rem);
  }
}
@keyframes rightLeft01 {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-1.5rem);
  }
}
@keyframes leftRight01 {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(1.5rem);
  }
}
@keyframes rightLeft02 {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-0.5rem);
  }
}
@keyframes leftRight02 {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(0.5rem);
  }
}/*# sourceMappingURL=index.css.map */