@charset "UTF-8";
/* CSS Document */

article{
	margin: 0 auto 5em;
}




.coming_page{
	padding: 5em 0
}
.coming_page h3{
	font-size: 1.5em;
	line-height: 1.6;
	margin-bottom: 2em;
}


@media (min-width: 1000px) {
	.news__item {
		padding: 30px 0
	}
}
.news__tag{
	line-height: 1
}

/* ========================================
   Forest Kids Hero
======================================== */

.forest-hero {
  position: relative;
  width: 100%;
  height: 350px;
  overflow: hidden;
}

.forest-hero:before {
  content: '';
  display: block;
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 30%;
  max-height: 160px;
  background: url("../img/common/grass.png") repeat-x top / contain;
}

@media screen and (min-width: 1200px) {
  .forest-hero {
    height: 530px;
      margin-top: -200px;
      z-index: -1
  }
    .forest-hero:before {
        height: 20%
    }
}

@media screen and (min-width: 1400px) {
  .forest-hero {
      height: 555px;
    }
}


/* ========================================
   タイトル
======================================== */

.forest-hero__title {
  position: absolute;
  top: 42%;
  left: 50%;
  z-index: 20;
  width: 100%;
  padding: 0 20px;
  transform: translate(-50%, -50%);
  text-align: center;
}

.forest-hero__title h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #315773;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.forest-hero__title-en {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -58%);
  color: rgba(49, 87, 115, 0.06)!important;
  font-family: "Playfair Display", serif;
  font-size: 80px;
  font-style: italic;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

@media screen and (min-width: 768px) {
  .forest-hero__title {
    top: 45%;
  }

  .forest-hero__title h1 {
    font-size: clamp(23px, 2.1vw, 40px);
  }

  .forest-hero__title-en {
    font-size: clamp(80px, 10vw, 180px);
  }
}

@media (min-width:1200px){
    .forest-hero__title {
        top: 55%;
      }
}

.section-en {
    margin: 0 0 4px;
    color: var(--page-main-color);
    font: italic 18px/1.4 var(--en-font), Georgia, serif!important;
}
.section-title1{
    margin: 0 0 38px;
    color: var(--page-main-color);
    text-align: center;
    font: 500 32px / 1.5 var(--font-mincho);
    letter-spacing: .1em;
}
@media (min-width:701px){
    .section-title1{
        margin: 0 0 65px;
        font: 500 clamp(32px, 2.8vw, 46px) / 1.5 var(--font-mincho);
    }
}

/* ========================================
   木
======================================== */

.forest-hero__tree {
  position: absolute;
  bottom: 40px;
  width: 180px;
  height: auto;
  transform-origin: center bottom;
  z-index: -1;
}

.forest-hero__tree--left {
  left: -80px;
  animation: forestTreeLeft 7.5s ease-in-out infinite alternate;
}

.forest-hero__tree--right {
  right: -80px;
  animation: forestTreeRight 9s ease-in-out infinite alternate;
}

.forest-hero__grass {
  min-width: 900px;
}

@media screen and (min-width: 768px) {
  .forest-hero__tree {
    width: clamp(220px, 22vw, 390px);
  }

  .forest-hero__tree--left {
    left: 1%;
  }

  .forest-hero__tree--right {
    right: 1%;
  }

  .forest-hero__grass {
    min-width: 0;
  }
}


/* 木：左 */
@keyframes forestTreeLeft {
  0% {
    transform: rotate(-0.6deg);
  }

  45% {
    transform: rotate(0.7deg);
  }

  100% {
    transform: rotate(-0.25deg);
  }
}


/* 木：右 */
@keyframes forestTreeRight {
  0% {
    transform: rotate(0.5deg);
  }

  50% {
    transform: rotate(-0.7deg);
  }

  100% {
    transform: rotate(0.3deg);
  }
}


/* ========================================
   動物共通
======================================== */

.forest-hero__animal {
  position: absolute;
  z-index: 10;
  height: auto;
  transform-origin: center bottom;
}


/* ========================================
   ハリネズミ
======================================== */

.forest-hero__hedgehog {
  display: none;
  left: 11%;
  bottom: 50px;
  width: clamp(35px, 3vw, 60px);
  animation: hedgehogMove 8s ease-in-out infinite;
}

@media screen and (min-width: 768px) {
  .forest-hero__hedgehog {
    display: block;
  }
}

@keyframes hedgehogMove {
  0%,
  70%,
  100% {
    transform: translateX(0);
  }

  77% {
    transform: translateX(3px);
  }

  84% {
    transform: translateX(0);
  }
}


/* ========================================
   狐
======================================== */

.forest-hero__fox {
  display: none;
  left: 15%;
  bottom: 42px;
  width: clamp(110px, 10vw, 185px);
  animation: foxMove 9s ease-in-out infinite;
}

@media screen and (min-width: 768px) {
  .forest-hero__fox {
    display: block;
  }
}

@keyframes foxMove {
  0%,
  68%,
  100% {
    transform: translateX(0) rotate(0);
  }

  74% {
    transform: translateX(3px) rotate(-1deg);
  }

  80% {
    transform: translateX(0) rotate(1deg);
  }
}


/* ========================================
   左のうさぎ
======================================== */

.forest-hero__rabbit-left {
  display: none;
  left: 28%;
  bottom: 35px;
  width: clamp(55px, 5vw, 90px);
  z-index: -1;
  animation: rabbitSmallMove 7s ease-in-out infinite;
}

@media screen and (min-width: 768px) {
  .forest-hero__rabbit-left {
    display: block;
  }
}

@keyframes rabbitSmallMove {
  0%,
  72%,
  100% {
    transform: translateY(0) rotate(0);
  }

  78% {
    transform: translateY(-5px) rotate(-2deg);
  }

  84% {
    transform: translateY(0) rotate(1deg);
  }
}


/* ========================================
   中央のうさぎ
======================================== */

.forest-hero__rabbit-jump {
  left: 5%;
  bottom: 65px;
  width: 90px;
  animation: rabbitJump 1.8s infinite;
}

@media screen and (min-width: 768px) {
  .forest-hero__rabbit-jump {
    left: 40%;
    bottom: 23px;
    width: clamp(90px, 8vw, 145px);
  }
}


/* ぴょんと跳ねる */
@keyframes rabbitJump {
  0%,
  15%,
  48%,
  100% {
    transform: translateY(0);
  }

  22% {
    transform: translateY(-4px);
  }

  30% {
    transform: translateY(-18px);
  }

  34% {
    transform: translateY(-20px);
  }

  38% {
    transform: translateY(-16px);
  }

  45% {
    transform: translateY(0);
  }
}


/* ========================================
   子鹿
======================================== */

.forest-hero__deer-child {
  display: block;
  right: 15%;
  bottom: 52px;
  width: 65px;
  animation: deerChildMove 8.5s ease-in-out infinite;
}

@media screen and (min-width: 768px) {
  .forest-hero__deer-child {
    right: 25%;
    bottom: 35px;
    width: clamp(65px, 6vw, 110px);
  }
}

@keyframes deerChildMove {
  0%,
  65%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  72% {
    transform: translateY(2px) rotate(1deg);
  }

  79% {
    transform: translateY(0) rotate(-1deg);
  }
}


/* ========================================
   鹿
======================================== */

.forest-hero__deer {
  display: block;
  right: -22px;
  bottom: 55px;
  width: 130px;
  animation: deerMove 10s ease-in-out infinite;
}

@media screen and (min-width: 768px) {
  .forest-hero__deer {
    right: 15%;
    bottom: 35px;
    width: clamp(125px, 11vw, 205px);
  }
}

@keyframes deerMove {
  0%,
  70%,
  100% {
    transform: rotate(0deg);
  }

  76% {
    transform: rotate(1.1deg);
  }

  82% {
    transform: rotate(-0.7deg);
  }

  88% {
    transform: rotate(0deg);
  }
}


/* ========================================
   蝶
======================================== */

.forest-hero__butterfly {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.forest-hero__butterfly img {
  display: block;
  width: 100%;
  height: auto;
  animation: butterflyFlutter 0.85s ease-in-out infinite alternate;
}


/* 黄色 */
.forest-hero__butterfly--yellow {
  top: 18%;
  left: 18%;
  width: clamp(25px, 2.3vw, 42px);
  animation: butterflyYellowPath 8s ease-in-out infinite;
}


/* 青 */
.forest-hero__butterfly--blue {
  top: 23%;
  right: 17%;
  width: clamp(24px, 2.2vw, 40px);
  animation: butterflyBluePath 9.5s ease-in-out infinite;
}

@media screen and (min-width: 768px) {
  .forest-hero__butterfly--yellow {
    top: 45%;
    left: 27%;
  }

  .forest-hero__butterfly--blue {
    top: 42%;
    right: 25%;
  }
}


/* 蝶の細かな揺れ */
@keyframes butterflyFlutter {
  0% {
    transform: translateY(-2px) rotate(-4deg) scale(0.97);
  }

  100% {
    transform: translateY(3px) rotate(4deg) scale(1.03);
  }
}


/* 黄色い蝶 */
@keyframes butterflyYellowPath {
  0%,
  100% {
    transform: translate(0, 0) rotate(-8deg);
  }

  20% {
    transform: translate(18px, -18px) rotate(8deg);
  }

  40% {
    transform: translate(40px, 8px) rotate(-6deg);
  }

  60% {
    transform: translate(22px, 28px) rotate(9deg);
  }

  80% {
    transform: translate(-10px, 12px) rotate(-5deg);
  }
}


/* 青い蝶 */
@keyframes butterflyBluePath {
  0%,
  100% {
    transform: translate(0, 0) rotate(5deg);
  }

  18% {
    transform: translate(-18px, 14px) rotate(-7deg);
  }

  38% {
    transform: translate(-35px, -12px) rotate(8deg);
  }

  58% {
    transform: translate(-12px, -28px) rotate(-5deg);
  }

  80% {
    transform: translate(15px, -8px) rotate(7deg);
  }
}


/* ========================================
   動きを抑える設定
======================================== */

@media (prefers-reduced-motion: reduce) {
  .forest-hero *,
  .forest-hero *::before,
  .forest-hero *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}