.section_news {
  background: #ffffff;
  position: relative;
  margin-top: 5vw;
}
.section_news.ready h2 {
  opacity: 0;
  letter-spacing: 1ex;
}
.section_news.ready h2::before {
  transform: translateY(50px) rotateY(180deg);
}
@media only screen and (min-width: 960px) and (max-width: 1229px) {
  .section_news {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 959px) {
  .section_news {
    margin-top: 70px;
  }
}
@media only screen and (max-width: 767px) {
  .section_news {
    margin-top: 60px;
  }
}
.section_news > figure.news_top {
  margin: 0;
  padding: 0;
  position: relative;
  pointer-events: none;
}
.section_news > figure.news_top .distant_view {
  width: 100%;
  background: url(distant_view.webp) 50% 0%/cover no-repeat;
  aspect-ratio: 25/1;
  position: absolute;
  bottom: 100%;
}
.section_news > figure.news_top .branch_l {
  background: url(branch_l_summer.webp) 50% 0%/cover no-repeat;
  width: 320px;
  aspect-ratio: 8/3;
  position: absolute;
  left: 0;
  top: -80px;
}
@media only screen and (min-width: 960px) and (max-width: 1229px) {
  .section_news > figure.news_top .branch_l {
    width: 256px;
  }
}
@media only screen and (max-width: 959px) {
  .section_news > figure.news_top .branch_l {
    width: 240px;
  }
}
@media only screen and (max-width: 767px) {
  .section_news > figure.news_top .branch_l {
    top: -50px;
    width: 38.4vw;
  }
}
.section_news > figure.news_top .branch_r {
  background: url(branch_r_summer.webp) 50% 0%/cover no-repeat;
  width: 270px;
  aspect-ratio: 3/1;
  position: absolute;
  right: 0;
  top: -90px;
}
@media only screen and (min-width: 960px) and (max-width: 1229px) {
  .section_news > figure.news_top .branch_r {
    width: 216px;
  }
}
@media only screen and (max-width: 959px) {
  .section_news > figure.news_top .branch_r {
    width: 202.5px;
  }
}
@media only screen and (max-width: 767px) {
  .section_news > figure.news_top .branch_r {
    top: -50px;
    width: 32.4vw;
  }
}
.section_news > figure.news_top .shimaenaga_frame {
  width: 62.5%;
  height: 106.6666666667%;
  position: absolute;
  animation: shimaenaga_jump 12s infinite;
  top: -56.25%;
}
@keyframes shimaenaga_jump {
  0% {
    transform: translateY(0);
  }
  69% {
    transform: translateY(0);
  }
  70% {
    transform: translateY(-7.8125%) translateX(3.125%);
  }
  71% {
    transform: translateY(3.90625%) translateX(6.25%);
  }
  98% {
    transform: translateY(3.90625%) translateX(6.25%);
  }
  99% {
    transform: translateY(-7.8125%) translateX(3.125%);
  }
  100% {
    transform: translateY(0);
  }
}
.section_news > figure.news_top .shimaenaga_frame > div {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/shimaenaga_frame.webp) 0 0/100% 400% no-repeat;
  animation: shimaenaga_anim_frame 12s steps(1) infinite;
}
@keyframes shimaenaga_anim_frame {
  0% {
    background-position-y: 0;
  }
  15% {
    background-position-y: 33.3%;
  }
  20% {
    background-position-y: 0;
  }
  50% {
    background-position-y: 33.3%;
  }
  60% {
    background-position-y: 0;
  }
  70% {
    background-position-y: 66.6%;
  }
  80% {
    background-position-y: 100%;
  }
  90% {
    background-position-y: 66.6%;
  }
  99% {
    background-position-y: 0;
  }
  100% {
    background-position-y: 0;
  }
}
.section_news > div {
  max-width: 1200px;
  margin: auto;
  padding: 0 15px;
}
.section_news > div .section_news_column {
  display: flex;
  margin: 0 -30px;
}
@media only screen and (min-width: 960px) and (max-width: 1229px) {
  .section_news > div .section_news_column {
    margin: 0 -15px;
  }
}
@media only screen and (max-width: 959px) {
  .section_news > div .section_news_column {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .section_news > div .section_news_column {
    display: block;
  }
}
.section_news > div .section_news_column > div {
  width: 50%;
  padding: 15px 30px;
  box-sizing: border-box;
}
@media only screen and (min-width: 960px) and (max-width: 1229px) {
  .section_news > div .section_news_column > div {
    padding: 15px 15px;
  }
}
@media only screen and (max-width: 959px) {
  .section_news > div .section_news_column > div {
    width: auto;
  }
}
@media only screen and (max-width: 767px) {
  .section_news > div .section_news_column > div {
    width: auto;
  }
}
.section_news > figure.news_bottom {
  content: "";
  display: block;
  aspect-ratio: 1600/350;
  background: url(topics_footer_summer.png) 50% 0/100% auto no-repeat;
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  bottom: -5vw;
}
.section_news h2 {
  font-size: 36px;
  letter-spacing: 0.1em;
  color: #14274c;
  display: table;
  margin: 0 auto 1ex;
  position: relative;
  line-height: 1.6;
  font-weight: 700;
  box-sizing: border-box;
  text-align: center;
  transition: 0.5s all cubic-bezier(0.39, 0.575, 0.565, 1);
}
@media only screen and (max-width: 767px) {
  .section_news h2 {
    font-size: 27px;
  }
}
.section_news h2 small {
  display: block;
  font-size: 18px;
  margin-top: 1ex;
  letter-spacing: 0.1ex;
}
.section_news h2::before {
  content: "";
  display: block;
  background: url(h1_bg.webp) 50% 50%/contain no-repeat;
  height: 24px;
  position: relative;
  width: auto;
  top: 0;
  left: 0;
  border-radius: 0;
  transition: 0.5s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media only screen and (max-width: 767px) {
  .section_news h2::before {
    height: 18px;
  }
}
.section_news h2.deco::after {
  content: "";
  display: block;
  background: url(h1_footer.webp) 50% 50%/contain no-repeat;
  height: 12px;
  width: 264px;
  margin: 0.5ex auto 1ex;
}
.section_news h2 > span {
  display: block;
  position: relative;
}

body.spring .section_news > figure.news_top .branch_l {
  background-image: url(branch_l_spring.webp);
}
body.spring .section_news > figure.news_top .branch_r {
  background-image: url(branch_r_spring.webp);
}
body.spring .section_news > figure.news_bottom {
  background-image: url(topics_footer_spring.png);
}
body.spring .section_news > figure .seasonal_creature1,
body.spring .section_news > figure .seasonal_creature2 {
  pointer-events: none;
  width: 95px;
  height: 85px;
  position: absolute;
  top: 0;
  left: 10%;
  animation: choucho_moveXY 12s infinite;
  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
@keyframes choucho_moveXY {
  0% {
    top: 30%;
    left: 60%;
    transform: scaleX(1);
  }
  10% {
    top: 0%;
  }
  25% {
    left: 20%;
    transform: scaleX(1);
  }
  26% {
    transform: scaleX(-1);
  }
  30% {
    top: 40%;
  }
  50% {
    top: 0%;
  }
  60% {
    left: 50%;
    transform: scaleX(-1);
  }
  61% {
    transform: scaleX(1);
  }
  70% {
    top: 40%;
  }
  80% {
    left: 30%;
    transform: scaleX(1);
  }
  81% {
    transform: scaleX(-1);
  }
  100% {
    top: 30%;
    left: 60%;
    transform: scaleX(-1);
  }
}
body.spring .section_news > figure .seasonal_creature1 > div,
body.spring .section_news > figure .seasonal_creature2 > div {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: choucho_moveY 0.6s infinite;
  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  animation-delay: -0.5s;
}
@keyframes choucho_moveY {
  0% {
    top: 70%;
  }
  40% {
    top: 0%;
  }
  100% {
    top: 70%;
  }
}
body.spring .section_news > figure .seasonal_creature1 > div::before,
body.spring .section_news > figure .seasonal_creature2 > div::before {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  background: url(../img/choucho.webp) 50% 0%/100% 300% no-repeat;
  animation: choucho_anim_frame 0.6s steps(1) infinite;
}
@keyframes choucho_anim_frame {
  0% {
    background-position-y: 0%;
  }
  20% {
    background-position-y: 50%;
  }
  40% {
    background-position-y: 100%;
  }
  90% {
    background-position-y: 50%;
  }
  100% {
    background-position-y: 0%;
  }
}
body.spring .section_news > figure .seasonal_creature2 {
  animation: choucho_moveXY2 10s infinite;
}
@keyframes choucho_moveXY2 {
  0% {
    top: 20%;
    left: 50%;
    transform: scaleX(1);
  }
  10% {
    top: 0%;
  }
  25% {
    left: 20%;
    transform: scaleX(1);
  }
  26% {
    transform: scaleX(-1);
  }
  30% {
    top: 30%;
  }
  50% {
    top: 0%;
  }
  60% {
    left: 50%;
    transform: scaleX(-1);
  }
  61% {
    transform: scaleX(1);
  }
  70% {
    top: 30%;
  }
  80% {
    left: 30%;
    transform: scaleX(1);
  }
  81% {
    transform: scaleX(-1);
  }
  100% {
    top: 20%;
    left: 50%;
    transform: scaleX(-1);
  }
}
body.spring .section_news > figure .seasonal_creature2 > div {
  transform: translateY(-20px) scale(0.9);
  animation-delay: -0.07s;
}
@media only screen and (max-width: 767px) {
  body.spring .section_news > figure .seasonal_creature2 > div {
    transform: scale(0.5) translateY(-30px);
  }
}
body.spring .section_news > figure .seasonal_creature2 > div::before {
  animation-delay: -0.07s;
}
body.summer .section_news > figure.news_top .branch_l {
  background-image: url(branch_l_summer.webp);
}
body.summer .section_news > figure.news_top .branch_r {
  background-image: url(branch_r_summer.webp);
}
body.summer .section_news > figure.news_bottom {
  background-image: url(topics_footer_summer.png);
}
body.summer .section_news > figure .seasonal_creature1,
body.summer .section_news > figure .seasonal_creature2 {
  pointer-events: none;
  width: 70px;
  height: 65px;
  position: absolute;
  top: 0;
  left: 10%;
  animation: bee_moveXY 12s infinite;
  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
@keyframes bee_moveXY {
  0% {
    top: 30%;
    left: 50%;
    transform: scaleX(1);
  }
  10% {
    top: 0%;
  }
  25% {
    left: 10%;
    transform: scaleX(1);
  }
  26% {
    transform: scaleX(-1);
  }
  30% {
    top: 50%;
  }
  50% {
    top: 0%;
  }
  60% {
    left: 60%;
    transform: scaleX(-1);
  }
  61% {
    transform: scaleX(1);
  }
  70% {
    top: 40%;
  }
  80% {
    left: 40%;
    transform: scaleX(1);
  }
  81% {
    transform: scaleX(-1);
  }
  100% {
    top: 30%;
    left: 50%;
    transform: scaleX(-1);
  }
}
body.summer .section_news > figure .seasonal_creature1 > div,
body.summer .section_news > figure .seasonal_creature2 > div {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: bee_moveY 1.6s infinite;
  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
@keyframes bee_moveY {
  0% {
    top: 0%;
  }
  50% {
    top: 70%;
  }
  100% {
    top: 0%;
  }
}
body.summer .section_news > figure .seasonal_creature1 > div::before,
body.summer .section_news > figure .seasonal_creature2 > div::before {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  background: url(../img/bee.webp) 50% 0%/100% 200% no-repeat;
  animation: bee_anim_frame 0.2s steps(1) infinite;
}
@keyframes bee_anim_frame {
  0% {
    background-position-y: 0%;
  }
  50% {
    background-position-y: 100%;
  }
}
body.summer .section_news > figure .seasonal_creature1 {
  animation-delay: -1s;
}
@media only screen and (max-width: 767px) {
  body.summer .section_news > figure .seasonal_creature1 > div {
    transform: scale(0.7) translateY(-20px);
  }
}
body.summer .section_news > figure .seasonal_creature2 > div {
  transform: scale(0.7) translateY(10px);
  animation-delay: 0.1s;
}
@media only screen and (max-width: 767px) {
  body.summer .section_news > figure .seasonal_creature2 > div {
    transform: scale(0.5) translateY(-10px);
  }
}
body.summer .section_news > figure .seasonal_creature2 > div::before {
  animation-delay: 0.07s;
}
body.autumn .section_news > figure.news_top .branch_l {
  background-image: url(branch_l_autumn.webp);
}
body.autumn .section_news > figure.news_top .branch_r {
  background-image: url(branch_r_autumn.webp);
}
body.autumn .section_news > figure.news_bottom {
  background-image: url(topics_footer_autumn.png);
}
body.autumn .section_news > figure .seasonal_creature1,
body.autumn .section_news > figure .seasonal_creature2 {
  pointer-events: none;
  width: 80px;
  height: 50%;
  position: absolute;
  animation: tombow_moveX 18s infinite;
  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
@keyframes tombow_moveX {
  0% {
    left: 10%;
    transform: scaleX(1);
  }
  15% {
    left: 40%;
  }
  30% {
    left: 30%;
  }
  79% {
    transform: scaleX(1);
  }
  80% {
    left: 70%;
  }
  81% {
    transform: scaleX(-1);
  }
  99% {
    transform: scaleX(-1);
  }
  100% {
    left: 10%;
    transform: scaleX(1);
  }
}
body.autumn .section_news > figure .seasonal_creature1 > div,
body.autumn .section_news > figure .seasonal_creature2 > div {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 40px;
  animation: tombow_moveY 12s infinite;
  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  position: absolute;
}
@keyframes tombow_moveY {
  0% {
    top: 60%;
  }
  20% {
    top: 100%;
  }
  30% {
    top: 70%;
  }
  50% {
    top: 80%;
  }
  70% {
    top: 70%;
  }
  85% {
    top: 90%;
  }
  100% {
    top: 60%;
  }
}
body.autumn .section_news > figure .seasonal_creature1 > div::after,
body.autumn .section_news > figure .seasonal_creature2 > div::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/tombow.webp) 50% 0%/100% 200% no-repeat;
  animation: tombow_anim_frame 3s steps(1) infinite;
}
@keyframes tombow_anim_frame {
  0% {
    background-position-y: 0;
  }
  35% {
    background-position-y: 100%;
  }
  40% {
    background-position-y: 0;
  }
  87% {
    background-position-y: 100%;
  }
  90% {
    background-position-y: 0;
  }
  97% {
    background-position-y: 100%;
  }
  100% {
    background-position-y: 0;
  }
}
body.autumn .section_news > figure .seasonal_creature1 {
  top: 0%;
}
@media only screen and (max-width: 767px) {
  body.autumn .section_news > figure .seasonal_creature1 > div {
    transform: translateY(-60px);
  }
}
body.autumn .section_news > figure .seasonal_creature2 {
  top: 0%;
  animation-delay: -0.8s;
}
body.autumn .section_news > figure .seasonal_creature2 > div {
  transform: translateY(40px);
}
@media only screen and (max-width: 767px) {
  body.autumn .section_news > figure .seasonal_creature2 > div {
    transform: translateY(-20px);
  }
}
body.autumn .section_news > figure .seasonal_creature2 > div::after {
  transform: scale(0.8);
  animation-delay: -0.8s;
  animation-duration: 2.4s;
}
body.winter .section_news > figure.news_top .branch_l {
  background-image: url(branch_l_winter.webp);
}
body.winter .section_news > figure.news_top .branch_r {
  background-image: url(branch_r_winter.webp);
}
body.winter .section_news > figure.news_bottom {
  background-image: url(topics_footer_winter.png);
}
body.winter .section_news > figure .seasonal_creature1 {
  pointer-events: none;
  width: 187.5px;
  height: 210px;
  position: absolute;
  top: 0;
  left: 10%;
  animation: tombow_moveX 18s infinite;
  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  background: url(../img/shika.webp) 50% 0%/100% 400% no-repeat;
  animation: shika_anim_frame 15s steps(1) infinite;
}
@keyframes shika_anim_frame {
  0% {
    background-position-y: 100%;
  }
  20% {
    background-position-y: 66.6%;
  }
  25% {
    background-position-y: 100%;
  }
  35% {
    background-position-y: 66.6%;
  }
  40% {
    background-position-y: 100%;
  }
  42% {
    background-position-y: 66.6%;
  }
  45% {
    background-position-y: 100%;
  }
  50% {
    background-position-y: 0%;
  }
  70% {
    background-position-y: 33.3%;
  }
  75% {
    background-position-y: 0%;
  }
  85% {
    background-position-y: 33.3%;
  }
  90% {
    background-position-y: 0%;
  }
  92% {
    background-position-y: 33.3%;
  }
  94% {
    background-position-y: 0%;
  }
  96% {
    background-position-y: 33.3%;
  }
  100% {
    background-position-y: 0;
  }
}
@media only screen and (max-width: 959px) {
  body.winter .section_news > figure .seasonal_creature1 {
    width: 150px;
    height: 168px;
    transform: scaleX(-1);
  }
}
@media only screen and (max-width: 767px) {
  body.winter .section_news > figure .seasonal_creature1 {
    width: 112.5px;
    height: 126px;
    left: 10%;
    top: auto;
    bottom: -10px;
    transform: scaleX(-1);
  }
}
body.winter .section_news > figure .seasonal_creature2 {
  display: none;
}

/*# sourceMappingURL=section_news.css.map */