@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/



/* --------------------------------------------- 共　有 --------------------------------------------- */


html {
  scroll-behavior: smooth; /* スムーズにスクロール */
  margin-top: 0 !important;
}

body {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #fff;
}

.container {
  overflow-x: hidden
}

.main {
  padding: 0;
}

a {
  text-decoration: none;
  font-size: 1em;
  font-family: "Zen Maru Gothic", sans-serif;
  transition: .2s ease;
  color: #333;

}

h1,
h2,
h3,
h4,
p {
   font-family: "Zen Maru Gothic", sans-serif;
   color: #333;
  }
p {
  line-height: 2;
  font-weight: 500;
}

h2 {
  font-size: 2.5em;
  font-weight: 700;
  color: #58280F;
}

ol,ul {
  padding-left: 0;
}

.wrap {
  width: 90%;
}

.content {
  margin-top: 0;
}


#admin-panel {
  display: none;
}

.section {
  width: 100%;
  padding: 10vw 0;
  font-size: min(1.82vw , 1em);
}

/* 背景 */
.section.bg_1 {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 5vw 0;
  background: #E1F6A6;
}
.section.bg_1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-35%);
  z-index: -1;
  width: 100%;
  height: 12em;
  background: url(images/bg.webp) repeat-x center / contain;
}
.section.bg_1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(35%) scaleY(-1);
  z-index: -1;
  width: 100%;
  height: 12em;
  background: url(images/bg.webp) repeat-x center / contain;
}

.section-inner {
  width: 90%;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
}

.flex {
  width:  100%;
  display: flex;
}

.pc,
.pc-2 {
  display: block;
}
.pc-title {
  display: inline-block;
}
.sp,
.sp-title,
.sp-3,
.sp-4 {
  display: none;
}

h3 span.sp-2 {
  display: inline-block;
}

/* ボタン */
.btn {
  position: relative;
  width: 15em;
  padding: 1em 0;
  font-size: 1.2em;
  border: initial;
  color: #F24D2C;
  background-color: initial;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50vw;
  box-sizing: border-box;
  border: .2em solid #F24D2C;
  background-color: #fff;

}
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(.1em , .1em);
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50vw;
  box-sizing: border-box;
  border: .2em solid #F24D2C;
  background-color: #F24D2C;
}

.btn a {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  color: #F24D2C;
}

.btn-arrow {
  pointer-events: none;
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 0;
  transform: translate(-.5em , -50%);
  display: block;
  aspect-ratio: 1 / 1;
  width: 2em;
  height: auto;
  border-radius: 50vw;
  background-color: #F24D2C;
}
.btn-arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  aspect-ratio: 5 / 4;
  width: .8em;
  height: auto;
  background: url(images/arrow_1.webp) no-repeat center / contain;
}

.btn:hover, .ranking-item-link-buttons a:hover, .btn-wrap > a:hover {
  opacity: 1;
}

/* 下層タイトル */
.key-visual {
  position: relative;
  width: 100vw; 
  height: auto;
  max-height: 95vh;
  aspect-ratio: 16 / 9;
  margin-left: calc(50% - 50vw);
  font-size: min(1.82vw , 1em);
}

.key-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.key-img::after,
.key-img-right::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  aspect-ratio: 4 / 1;
  width: 100%;
  height: auto;
  transform: translateY(1px);
  background: url(images/key-frame.webp) no-repeat center bottom / cover;
}
.key-img-right::after {
  transform: translateY(1px) scaleX(-1);
}

.childcare-fv .key-img {
    background: url(images/child-key.webp) no-repeat center top / cover;
}
.about-fv .key-img {
    background: url(images/about-key.webp) no-repeat center / cover;
}
.privacy-fv .key-img {
    background: url(images/child-key.webp) no-repeat center top / cover;
}
.recruit-fv .key-img {
    background: url(images/recruit-key.webp) no-repeat center top / cover;
}
.daily-fv .key-img {
    background: url(images/daily-key.webp) no-repeat center / cover;
}
.features-fv .key-img {
    background: url(images/features-key.webp) no-repeat center / cover;
}
.documents-fv .key-img {
    background: url(images/documents-key.webp) no-repeat center top / cover;
}
.blog-fv .key-img {
    background: url(images/blog-key.webp) no-repeat center bottom / cover;
}


.key-visual h2 span {
  color: #F24D2C;
}

.key-deco {
  pointer-events: none;
  position: absolute;
  z-index: 3;
  left: 50%;
  transform: translateX(-50%);
  aspect-ratio: 16 / 9;
  width: 90%;
  max-width: 1780px;
  height: 100%;
  max-height: 60vw;
}

.key-deco .key-deco-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.key-deco .deco-item1 {
  bottom: 27%;
  left: 0;
  transform: scale(-1 , 1);
  aspect-ratio: 4 / 5;
  width: 6vw;
  max-width: 4.5em;
  opacity: 0;
  animation: key-deco1 1s 0.2s ease-in-out forwards,
  key-deco1-1 15s ease-in-out infinite;
}

.key-deco .deco-item2 {
  bottom: 35%;
  left: 7%;
  aspect-ratio: 7 / 10;
  width: 3.5vw;
  max-width: 3em;
  opacity: 0;
  animation: key-deco1 1s 0.8s ease-in-out forwards,
  key-deco1-1 18s ease-in-out infinite;

}
.key-deco .deco-item3 {
  bottom: 6%;
  right: 6%;
  aspect-ratio: 1 / 2;
  width: 5vw;
  max-width: 3.5em;
  opacity: 0;
  animation: key-deco1 1s 1.4s ease-in-out forwards,
  key-deco1-1 12s ease-in-out infinite;
}
.key-deco .deco-item4 {
  bottom: 20%;
  right: 0;
  aspect-ratio: 2 / 5;
  width: 4vw;
  max-width: 2em;
  opacity: 0;
  animation: key-deco1 1s 2s ease-in-out forwards,
  key-deco1-1 15s ease-in-out infinite;
}

.key-deco.key-deco-right .deco-item1 {
  bottom: 6%;
  left: 42%;
  transform: scale(-1 , 1);
  opacity: 0;
  animation: key-deco1 1s 0.2s ease-in-out forwards,
  key-deco1-1 15s ease-in-out infinite;
}

.key-deco.key-deco-right .deco-item2 {
  bottom: 18%;
  left: 50%;
  opacity: 0;
  animation: key-deco1 1s 0.8s ease-in-out forwards,
  key-deco1-1 18s ease-in-out infinite;
}

.key-deco.key-deco-right .deco-item3 {
  bottom: 27%;
  right: 6%;
  opacity: 0;
  animation: key-deco1 1s 1.4s ease-in-out forwards,
  key-deco1-1 12s ease-in-out infinite;
}
.key-deco.key-deco-right .deco-item4 {
  bottom: 20%;
  right: 0;
  opacity: 0;
  animation: key-deco1 1s 2s ease-in-out forwards,
  key-deco1-1 15s ease-in-out infinite;
}

@keyframes key-deco1 {
  0% {
    opacity: 0;
    transform: scale(-1 , 1);
  }
  50% {
    transform: scale(-1.1 , 1.1);
  }
  100% {
    opacity: 1;
    transform: scale(-1 , 1);
  }
}
@keyframes key-deco1-1 {
  0%, 90%, 100% {
    transform: translate(0 , 0) scale(-1, 1);
  }
  92% {
    transform: translate(0 , 10%) scale(-1, 1);
  }
  94% {
    transform: translate(0 , 0) scale(-1, 1);
  }
}


/* タイトル */
.fv-title2 {
  position: absolute;
  z-index: 2;
  bottom: calc(0% + (100vw - 768px) * 0.08);
  left: 50%;
  transform: translate(-50% ,0);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 90%;  
  max-width: 1400px;  
  height: 100%;
}
.fv-title2 .inner {
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: 80%;
}
.fv-title2 .inner.key-right {
  position: relative;
  z-index: 1;
  margin-left: auto;
  text-align: right;
}

.anchor-nav ul {
  display: flex;
  gap: 1em;
}

.anchor-nav li {
  position: relative;
  border-radius: 50vw;
  border: #F24D2C solid .1em;
}
.anchor-nav li::before,
.anchor-nav li::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50vw;
  background: #fff url(images/arrow-btn_1.webp) no-repeat 93% / 1em ;
}
.anchor-nav li::before {
    z-index: 2;
}

.anchor-nav li::after {
    transform: translate(0, .15em);
    width: calc(100% + .2em);
    height: 104%;
    background-color: #F24D2C;
}

.anchor-nav li a {
    position: relative;
    display: block;
    z-index: 3;
    padding: .25em 2em;
    font-weight: 600;
    color: #F24D2C;
}

.fv-title2 h2 {
  transform: translateY(1em);
  margin-bottom: 0;
  margin-left: 2em;
  font-size: 3.1em;
  opacity: 0;
  transition: .5s ease;
}
.fv-title2.active h2 {
  opacity: 1;
  transform: translateY(0);
}

.fv-title2 .key-right h2 {
  margin-left: 0;
  margin-right: 2em;
}

.fv-title2 .key-right .anchor-nav ul {
  justify-content: end;
  
}

.ex {
  opacity: 0;
  transition: .5s ease;
}

.ex.active {
  opacity: 1;
}

/* ヘッダー */

#header-container h1 {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  visibility: hidden;
}


#wpadminbar {
  display: none;
}

#header-container {
  position: absolute;
  z-index: 10;
  transform: translateY(0);
  width: 100%;
  height: 80px;
  font-size: min(1.82vw , 1em);
  background-color: initial;
  animation: header 1s ease forwards;
}
@keyframes header {
  0% {
    transform: translateY(-800%);
  }
  100% {
    transform: translateY(0);
  }
}

/* ヘッダー背景 */
#header-container .header-bg {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: auto;
  margin-left: calc(50% - 50vw);
}
#header-container .header-bg::before {
  content: '';
  display: block;
  width: 100%;
  height: 8.5em;
  background: url(images/header-c.webp) repeat-x center top / contain;
}


.bg-item {
  position: absolute;
  top: 0;
  width: min(30vw, 27em);
  height: auto;

}
.header_left {
  left: 0;
}
.header_right {
  right: 0;
}

.bg-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;

}

.header-container-in {
  z-index: 1;
  width: 90%;
  height: 100%;
}

.header-container-in.hlt-top-menu {
  position: relative;
  z-index: 1;
}

.header-container-in.hlt-top-menu .header {
  width: 100%;

}

#header-in {
  position: relative;
  z-index: 2;
  justify-content: space-between;
  flex-direction: row;
  height: auto;
  margin-top: 1em;
}

.header-logo {
  width: 12%; 
  min-width: 8em;
  height: 100%;
}
.header-logo a {
  display: block;
  width: 100%;
  height: 100%;
}
.header-logo a img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1);
  transition: .2s ease-out;
}
.header-logo a img:hover {
  transform: scale(1.1);

}

.header-container-in.hlt-top-menu .navi {
  margin-top: 1em;
  background-color: inherit;
}

#header-in nav ul{
  display: flex;
  justify-content: end;
  gap: 2em;
}

.navi-in a {
  font-size: 1em;
  font-weight: 600;
  color: #58280F;
  transition: .2s ease !important;
}
.navi-in a:hover {
  background-color: transparent;
  color: #58280F;
}

.cf::after {
  display: none;
}





/* ----------------------------------------------------------- TOPページ ----------------------------------------------------------- */

/* --------------------------------------------- FV --------------------------------------------- */


/* キービジュアル */

.fv {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100vw;
  height: auto;
  max-height: 95vh;
  margin-left: calc(50% - 50vw);
  font-size: min(1.82vw , 1em);
}

.fv-deco {
  pointer-events: none;
  position: absolute;
  z-index: 3;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
}
.fv-deco .fv-deco-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0 0 min(30vw , 30em) min(30vw , 30em);
  font-size: min(1.56vw , 1em);
}
.deco-item {
  position: absolute;
  width: 4em;
  height: auto
}
.deco-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
} 

.fv-deco .deco-item.deco-item1 {
  bottom: 30%;
  left: 0;
  transform: translate(40%, 50%) scale(-1, 1);
  aspect-ratio: 4 / 5;
  opacity: 0;
  animation: deco1 1s 0.2s ease-in-out forwards,
    deco1-1 15s ease-in-out infinite;
}
@keyframes deco1 {
  0% {
    opacity: 0;
    transform: translate(40%, 50%)  scale(-1, 1) ;
  }
  50% {
    transform: translate(40%, 50%)  scale(-1.1, 1.1) ;
  }
  100% {
    opacity: 1;
    transform: translate(40%, 50%)  scale(-1, 1) ;
  }
}
@keyframes deco1-1 {
  0%, 90%, 100% {
    transform: translate(40%, 50%) scale(-1, 1);
  }
  92% {
    transform: translate(40%, 40%) scale(-1, 1);
  }
  94% {
    transform: translate(40%, 50%) scale(-1, 1);
  }
}


.fv-deco .deco-item.deco-item2 {
  bottom: 15%;
  left: 8%;
  transform: translate(0, 50%) scale(1);
  opacity: 0;
  aspect-ratio: 7 / 10;
  width: 3.2em;
  animation: deco2 1s .8s ease-in-out forwards,
  deco2-1 10s ease-in-out infinite;
}
@keyframes deco2 {
  0% {
    opacity: 0;
    transform: translate(0, 50%)  scale(1) ;
  }
  50% {
    transform: translate(0, 50%)  scale(1.1) ;
  }
  100% {
    opacity: 1;
    transform: translate(0, 50%)  scale(1, 1) ;
  }
}
@keyframes deco2-1 {
  0%, 90%, 100% {
    transform: translate(0, 50%)  scale(1) ;
  }
  92% {
    transform: translate(0, 35%)  scale(1) ;
  }
  96% {
    transform: translate(0, 50%)  scale(1) ;
  }
}


.fv-deco .deco-item.deco-item3 {
  bottom: 0;
  left: 25%;
  transform: translate(-50%, 10%);
  display: flex;
  gap: 1em;
  aspect-ratio: 2 / 1;
  width: 9em;
  opacity: 0;
  animation: deco3 1s 1s ease-in-out forwards;
}
.fv-deco .deco-item.deco-item3 img {
  width: calc(100% / 3 - .7em);
  opacity: 0;
}

.fv-deco .deco-item.deco-item3 img:nth-child(1) {
  animation: deco3 1s 1.2s ease-in-out forwards,
  deco3-1 12s ease-in-out infinite;
}
.fv-deco .deco-item.deco-item3 img:nth-child(2) {
  animation: deco3 1s 1.4s ease-in-out forwards,
  deco3-1 12.2s ease-in-out infinite;
}
.fv-deco .deco-item.deco-item3 img:nth-child(3) {
  animation: deco3 1s 1.6s ease-in-out forwards,
  deco3-1 12.4s ease-in-out infinite;
}

@keyframes deco3 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes deco3-1 {
  0%, 90%, 100% {
    transform: translate(0 , 0);
  }
  92% {
    transform: translate(0 , -10%);
  }
  96% {
    transform: translate(0 , 0);
  }
}

.fv-deco .deco-item.deco-item4 {
  bottom: 18%;
  right: 6%;
  transform: translate(0 , 50%);
  aspect-ratio: 1 / 2;
  width: 3em;
  opacity: 0;
  animation: deco4 1s 1.4s ease-in-out forwards,
  deco4-1 18s ease-in-out infinite;
}
@keyframes deco4 {
  0% {
    opacity: 0;
    transform: translate(0 , 50%) scale(1) ;
  }
  50% {
    transform: translate(0 , 50%) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translate(0 , 50%) scale(1, 1) ;
  }
}
@keyframes deco4-1 {
  0%, 90%, 100% {
    transform: translate(0 , 50%) scale(1) ;
  }
  92% {
    transform: translate(0 , 40%) scale(1) ;
  }
  96% {
    transform: translate(0 , 50%) scale(1) ;
  }
}

.fv-deco .deco-item.deco-item5 {
  bottom: 30%;
  right: 0;
  transform: translate(-40% , 50%);
  aspect-ratio: 2 / 5;
  width: 3em;
  opacity: 0;
  animation: deco5 1s 2s ease-in-out forwards,
    deco5-1 20s ease-in-out infinite;;
}
@keyframes deco5 {
  0% {
    opacity: 0;
    transform: translate(-40% , 50%) scale(1) ;
  }
  50% {
    transform: translate(-40% , 50%) scale(1.1) ;
  }
  100% {
    opacity: 1;
    transform: translate(-40% , 50%) scale(1, 1) ;
  }
}
@keyframes deco5-1 {
  0%, 90%, 100% {
    transform: translate(-40% , 50%) scale(1) ;
  }
  92% {
    transform: translate(-40% , 40%) scale(1) ;
  }
  96% {
    transform: translate(-40% , 50%) scale(1) ;
  }
}

.fv-deco .deco-item.deco-item6 {
  top: 48%;
  right: 15%;
  transform: translate(0 , -50%) scale(1) rotate(0);
  aspect-ratio: 10 / 7;
  width: 6em;
  opacity: 0;
  animation: deco6 1.5s .2s ease-in-out forwards;
}
@keyframes deco6 {
  0% {
    opacity: 0;
    transform: translate(50% , 0) scale(.8) rotate(-10deg);
  }
  100% {
    opacity: 1;
    transform: translate(0 , -50%) scale(1) rotate(0);
  }
}


.fv-deco .deco-item.deco-item7 {
  top: 53%;
  right: 11%;
  transform: translate(0 , -50%);
  aspect-ratio: 10 / 7;
  width: 3em;
  opacity: 0;
  animation: deco6 1.5s .8s ease-in-out forwards;
}

/* スライド */

#slider1.splide {
  border-radius: 0 0 min(30vw , 30em) min(30vw , 30em);
  overflow: hidden;
}
.splide,
.splide__track,
.splide__list,
.splide__slide {
  width: 100%;
  height: 100%;
  max-height: 95vh;
}
.splide__slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-radius: 3vw;
}

#slider1 .splide__slide img:nth-child(1) {
  object-position: bottom;
}



/* タイトル */

.fv-inner {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 100%;
}

.fv-title {
  position: absolute;
  bottom: 30%;
  left: 5%;
  transform: translateY(10vw);
  font-size: min(1.2vw , 1em);
}
.fv-title h2 {
  color: #58280F;
  font-size: 3.2em;
}

.fv-title span {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0 .5em 0 1em;
  opacity: 0;
  transform: translateY(1em);
  transition: .8s ease;
}
.load .fv-title span  {
  opacity: 1;
  transform: translateY(0);
}

.fv-title span::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: .3em;
  background-color: #fff;
}
.fv-title span::after {
  content: '';
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  transform: translate(.1em , .1em);
  width: 100%;
  height: 100%;
  border-radius: .3em;
  background-color: #F24D2C;
}

.fv-title span.title2 {
  margin-left: 1.5em;
  margin-top: .2em;
  transition: .8s .5s ease;
}

ruby {
  position: relative;
}

rt {
  font-size: .4em;
}

html.safari rt {
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  transform: translate(-2.2em, -2.5em);
  line-height: 1;
}


/* fvボタン */

.btn-flex {
  position: absolute;
  bottom: 0;
  right: 50%;
  transform:  translate(50% , 1.5em);
  display: flex;
  justify-content: end;
  gap: 1.5em;
  width: 90vw;
}

.btn-flex .btn-cont {
  position: relative;
  display: grid;
  align-content: center;
  text-align: center;
  width: 6.5em;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50vw;
  background-color: #F24D2C;
  border: .3em #F24D2C solid;
  transform: scale(1);
  transition: .2s ease;
}
.btn-flex .btn-cont:hover {
  background-color: #fff;
  border: .3em #F24D2C solid;
  transform: scale(1.1);
}


.btn-img {
  position: relative;
  aspect-ratio: 7 / 10;
  width: auto;
  height: 2em;
  margin: 0 auto;
}
.btn-img.btn-img2{
  aspect-ratio: 10 / 7;
}

.btn-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.btn-img img.btn-w {
  z-index: 1;
}

.btn-cont:hover .btn-img img.btn-w {
  z-index: -1;
}

.btn-cont p {
  font-size: .8em;
  font-weight: 700;
  color: #fff;
}
.btn-flex .btn-cont:hover p {
  color: #F24D2C;
}

.btn-cont a {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}




/* --------------------------------------------- 杜こども園について --------------------------------------------- */

#about.section {
  position: relative;
  padding: 20vw 0;
  padding-bottom: min(30vw, 200px);
}
.about-leaf {
  position: absolute;
  width: 1.5em;
  height: auto;
}
.about-leaf.leaf1 {
  top: 10vw;
  right: 27%;
  z-index: 3;
  transform: translate(50%, 30%) rotate(15deg);
  aspect-ratio: 1 / 2;
  opacity: 0;
}

.about-leaf.leaf1.active {
  will-change: transform, opacity;
  animation: leaf 5s ease-in-out forwards; 
}

@keyframes leaf {
  0% {
    opacity: 0;
    transform: translate(0%, -100%) rotate(0deg);
  }
  10% {
    opacity: 1;
  }

  25% {
    transform: translate(20%, 100%) rotate(15deg);
  }

  50% {
    transform: translate(-20%, 200%) rotate(-10deg);
  }

  75% {
    transform: translate(15%, 300%) rotate(20deg);
  }

  100% {
    opacity: 0;
    transform: translate(-10%, 400%) rotate(30deg);
  }
  
}


.about-leaf.leaf2 {
  bottom: 22%;
  left: 17%;
  transform: translate(50%, 0) rotate(110deg);
  aspect-ratio: 9 / 10;
}

#about .section-inner {
  position: relative;
  width: 100%;
}

/* 装　飾 */
.about-deco {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  margin-left: calc(50% - 50vw);
}

.about-deco .about-deco-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.about-deco .deco-item.deco-item1 {
  transform: translate(-5% , -90%) rotate(0);
  aspect-ratio: 10 / 7;
  width: min(20vw , 20em);
  animation: tree 10s ease-in-out infinite;
}
@keyframes tree {

  0%, 85%, 100% {
    transform: translate(-5% , -90%) rotate(0);
  }
  90% {
    transform: translate(-5% , -90%) rotate(5deg);
  }
  96% {
    transform: translate(-5% , -90%) rotate(0);
  }
  
}

.about-deco2 {
  position: absolute;
  top: 0;
  left: 18%;
  transform: translate(-250%, 0) scaleX(-1) rotate(-20deg);
  width: 3em; 
  opacity: 0;
  transition: 2s ease;
}
.about-deco2.active  {
  opacity: 1;
  transform: translate(0, -250%) scaleX(-1) rotate(0);
}


.about-deco3 {
  position: absolute;
  bottom: 0;
  right: 15%;
  transform: translate(50%, 400%);
  display: flex;
  gap: 1em;
  width: 5em;
  aspect-ratio: 10 / 4.7;
}
.about-deco3 img {
  width: calc(100% / 2 - .5em);
  height: auto;
  object-fit: contain;
  animation: about-deco 15s ease-in-out infinite;
}
.about-deco3 img.img_2 {
  animation-delay: .3s;
}

.about-deco4 {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(50%, 100%);
  aspect-ratio: 10 / 9.5;
  width: 5em;
  text-align: center;
}
.about-deco4 img {
  width: calc(100% / 2 - 1em);
  height: auto;
  object-fit: contain;
  transform: translate(0, 0);
  animation: about-deco 10s ease-in-out infinite;
}
.about-deco4 img.img_2 {
  animation-delay: .3s;
}
.about-deco4 img.img_3 {
  animation-delay: .6s;
}
@keyframes about-deco {
      0%, 90%, 100% {
      transform: translate(0, 0);
    }
    92% {
      transform: translate(0, -15%);
    }
    94% {
      transform: translate(0, 0);
    }
}


.about-deco4 .flex {
  position: absolute;
  top: 70%;
  height: auto;
  transform: translate(0, -50%);

}

.about-deco4 .flex img {
  width: calc(100% / 2 - 1em);
}


.about-deco5 {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(150%, -80%);
  aspect-ratio: 5 / 4;
  width: 3.5em;
  text-align: center;
}
.about-deco5 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}



#about .flex {
  gap: 2em;
}


/* 左側　テキスト */

#about .flex-wrap {
  width: 50%;
}

#about .wrap-inner {
  position: relative;
  width: 90%;
  max-width: 26em;
  margin: 0 auto;
}

#about h2 {
  margin-bottom: .5em;
}

#about p {
  max-width: 26em;
  margin-bottom: 3em;
  transform: translateY(10%);
  opacity: 0;
  transition: .5s .2s ease;
}
#about .active p {
  opacity: 1;
  transform: translateY(0);
}

#about .btn {
  opacity: 0;
  transition: .5s .4s ease;
}
#about .active .btn {
  opacity: 1;
}

/* 右側　画像 */

#about .wrap2 {
  position: relative;
}

#about .wrap2 img {
  height: auto;
  object-fit: cover;
  border-radius: 3vw;
}
#about .wrap2 img.pc {
  width: 65%;
  aspect-ratio: 10 / 9;
  margin-bottom: 4em;
  opacity: 0;
  transition: .5s .2s ease;
}
#about .active .wrap2 img.pc {
  opacity: 1;
}

#about .wrap2 .deco {
  position: absolute;
  bottom: 10.5em;
  right: 0;
  transform: translate(0 , 50%);
  aspect-ratio: 10 / 9;
  width: 55%;
  opacity: 0;
  transition: .5s .4s ease;
}
#about .active .wrap2 .deco {
  opacity: 1;
} 

#about .wrap2 .deco img {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  object-fit: cover;
}

#about .wrap2 .deco::after {
  content: '';
  position: absolute;
  top: 0;
  left: 65%;
  transform: translate(-50% , -95%);
  aspect-ratio: 1 / 2;
  width: 2em;
  height: auto;
  background: url(images/deco_5.webp) no-repeat center / contain;
}

#about .wrap2 .deco-sp {
  width: 40%;
  height: auto;
  opacity: 0;
  transition: .5s .6s ease;
}
#about .active .wrap2 .deco-sp {
  opacity: 1;
}
#about .wrap2 .deco-sp img {
  width: 100%;
  aspect-ratio: 5 / 4;
  margin-bottom: 0;

}

/* --------------------------------------------- コンテンツ --------------------------------------------- */


/* 教育と保育 */

#cnt.section.bg_1 {
  padding: 10vw 0 10vw 0;
}

#cnt .section-inner {
  width: 90%;
}

#cnt .flex {
  justify-content: space-between;
  align-items: center;
}
#cnt .flex.flex1 {
  margin-bottom: 10em;
}

/* 左側 */

#cnt .flex-wrap.wrap1 {
  position: relative;
  z-index: 1;
  width: 45%;
}

.cnt-title {
  position: absolute;
  display: inline-block;
  z-index: 1;
  font-size: min(3.5vw, 50px);
  transform: translateY(-80%);
}
.cnt-title h2 {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-size: 1em;
}

.cnt-title::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% ,-50%);
  z-index: 1;
  aspect-ratio: 5 / 2;
  width: 8em;
  height: auto;
  background: url(images/cnt-bg_w.webp) no-repeat center / contain;
}
.cnt-title::after {
  content: '';
  position: absolute;
  top: 70%;
  left: 62%;
  transform: translate(-50% ,-50%);
  aspect-ratio: 2 / 1;
  width: 7em;
  height: auto;
  background: url(images/cnt-bg_1c.webp) no-repeat center / contain;
}


/* 右側 */

#cnt .flex-wrap.wrap2 {
  position: relative;
  width: 55%;
}
#cnt .flex-wrap.wrap2::before {
  content: '';
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50% , -50%);
  aspect-ratio: 5 / 3;
  width: auto;
  height: 125%;
  background: url(images/bg-w.webp) no-repeat center / contain;
  opacity: 0;
  transition: .5s .2s ease;
}
#cnt .active .flex-wrap.wrap2::before {
  opacity: 1;
}

#cnt .cnt-text {
  position: relative;
  z-index: 1;
  width: 80%;
  max-width: 28em;
  margin: 0 auto;
  padding-top: 1em;
}
#cnt .cnt-text p {
  margin-bottom: 2.5em;
  opacity: 0;
  transform: translateY(1em);
  transition: .5s .6s ease;
}
#cnt .active .cnt-text p {
  opacity: 1;
  transform: translate(0);
}

#cnt .sub-title {
  margin-bottom: .5em;
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(1em);
  transition: .5s .4s ease-in-out;
}
#cnt .active .sub-title {
  opacity: 1;
  transform: translateY(0);
}

#cnt .btn {
  opacity: 0;
  transition: .5s .8s ease;
}
#cnt .active .btn {
  opacity: 1;
}

.sub-title span {
  color: #F24D2C;
}

/* 当園の特徴 */
#cnt .flex2 {
  flex-direction: row-reverse;
}
#cnt .flex2 .cnt-title::before {
  transform: translate(-50% ,-50%) scaleX(-1);
}
#cnt .flex2 .cnt-title::after {
  top: 73%;
  left: 37%;
  aspect-ratio: 5 / 2.37;
  width: 135%;
  background: url(images/cnt-bg_2c.webp) no-repeat center / contain;
}


#cnt .flex2 .cnt-title {
  right: 0;
}

.cnt-leaf {
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translate(50% , 0%) scaleX(-1);
  width: 100vw;
  max-width: 1200px;
  opacity: 0;
  transition: 1s ease;
}
.cnt-leaf.active {
  opacity: 1;
  transform: translate(50% , 85%) scaleX(-1);
}


.cnt-leaf img {
  width: 10em;
  height: auto;
  aspect-ratio: 5 / 4;
  animation: leaf2 15s ease infinite;
}
@keyframes leaf2 {
  0%, 90%, 100% {
    transform: rotate(0);
  }
  92% {
    transform: rotate(10deg);
  }
  96% {
    transform: rotate(0);
  }
  
}


.cnt-img {
  position: relative;
}
.cnt-img img {
  width: 100%;
  height: auto;
}

.cnt-deco {
  position: absolute;
  width: 5vw;
  height: auto;
}

.cnt-deco img {
  width: 100%;
  height: 100%;
  object-fit: contain
}


.cnt-deco1_1 {
  aspect-ratio: 2 / 5;
  top: 50%;
  left: 0;
  transform: translate(-60% , -50%);
  max-width: 3em;
}

.cnt-deco1_2 {
  aspect-ratio: 4 / 5;
  bottom: 10%;
  right: 0;
  transform: translate(-50%, 0);
  width: min(6vw, 4em);
  max-width: 4em;

}
.cnt-deco1_3 {
  bottom: 30%;
  right: 0;
  transform: translate(40%, 50%);
  aspect-ratio: 7 / 10;
  width: min(3vw, 2.5em);
  max-width: 2.5em;
}
.cnt-deco1_4 {
  top: 0;
  left: 30%;
  transform: translate(-80% , -50%) rotate(-30deg);
  aspect-ratio: 10 / 9;
  width: min(8vw, 4em);
  opacity: 0;
  transition: .5s 1s ease;
}
.active .cnt-deco1_4 {
  opacity: 1;
  transform: translate(-50%, -80%) rotate(0);
}


.cnt-deco1_5 {
  aspect-ratio: 7 / 10;
  top: 0;
  right: 0;
  transform: translate(-20%, -20%) rotate(30deg);
  width: min(7vw, 5em);
  opacity: 0;
  transition: .7s 1s ease;
}
.active .cnt-deco1_5 {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0);
}

.cnt-deco1_6 {
  aspect-ratio: 1 / 1;
  right: 0;
  bottom: 16%;
  transform: translate(-10% , -10%) rotate(10deg);
  width: min(5vw, 2.5em);
  opacity: 0;
  transition: .3s 1s ease;
}
.active .cnt-deco1_6 {
  opacity: 1;
  transform: translate(0 , 0) rotate(0);
}

.cnt-deco1_7 {
  left: 0;
  bottom: 0;
  transform: translate(-100%, 50%) scaleX(-1);
  aspect-ratio: 1 / 1;
  width: min(8vw, 4em);
}

.cnt-deco2_1 {
  top: 0;
  right: 20%;
  transform: translate(40% , -100%);
  aspect-ratio: 7 / 10;
  width: min(6vw, 3.5em);
  opacity: 0;
  transition: .5s 1s ease;
}
.active .cnt-deco2_1 {
  opacity: 1;
  transform: translate(50% , -100%);
}

.cnt-deco2_2 {
  bottom: 0;
  right: 0;
  transform: translate(80%, -30%);
  aspect-ratio: 3 / 5;
  width: min(5vw, 3em);
  opacity: 0;
  transition: .8s 1s ease;
}
.active .cnt-deco2_2 {
  opacity: 1;
  transform: translate(80%, -40%);
}

.cnt-deco2_3 {
  top: 0;
  right: 0;
  transform: translate(120%, 50%);
  aspect-ratio: 1 / 2;
  width: min(5vw, 2.5em);
}
.cnt-deco2_4 {
  top: 26%;
  right: -12%;
  transform: translate(100%, 50%);
  aspect-ratio: 3 / 5;
  width: min(5vw, 2em);
}

.cnt-deco2_5 {
  top: -12%;
  right: -5%;
  transform: translate(100%, 0);
  aspect-ratio: 5 / 4;
  width: min(8vw, 4em);
}


/* --------------------------------------------- 園での生活 --------------------------------------------- */

#daily {
  position: relative;
  transform: translateX(-100%);
  transition: 1s ease-in-out;
}
#daily.active {
  transform: translateX(0);
}

.daily-deco {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  height: auto;
}
.daily-deco img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.daily-deco1 {
  top: auto;
  bottom: 0;
  right: 30%;
  transform: translate(-8vw , -30%);
  aspect-ratio: 5 / 4;
  width: min(8vw , 5em);
  opacity: 0;
  transition: .5s 1s ease;
}
.active .daily-deco1 {
  opacity: 1;
}

.daily-deco2 {
  transform: translate(100% , 150%) rotate(20deg);
  aspect-ratio: 10 / 7;
  width: min(10vw , 6em);
  opacity: 0;
  transition: .8s 1s ease;
}
.active .daily-deco2 {
  opacity: 1;
  transform: translate(50% , 100%) rotate(0);
}


.daily-deco3 {
  transform: translate(30% , 30%) rotate(20deg);
  aspect-ratio: 10 / 7;
  width: min(6vw , 3em);
  opacity: 0;
  transition: .5s 1s ease-in-out;
}
.active .daily-deco3 {
  opacity: 1;
  transform: translate(0 , 0) rotate(0);
}

.daily-deco4 {
  z-index: -1;
  top: auto;
  bottom: 0;
  transform: translate(-150% , 5%) scale(-1, -1);
  aspect-ratio: 1 / 2;
  width: min(8vw , 6em);
  animation: rabbit 15s ease-in-out infinite;
}
@keyframes rabbit {
  0%, 85%, 100% {
    transform: translate(-150% , -50%) scale(-1, -1);
  }
  90% {
     transform: translate(-150% , 8%) scale(-1, -1);
  }
  96% {
    transform: translate(-150% , -50%) scale(-1, -1);
  }
}


#daily .section-inner {
  position: relative;
  width: 95%;
  max-width: 1200px;
}

#daily .section-inner::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 95vw;
  height: 60%;
  margin-left: calc(50% - 50vw);
  border-radius: 0 50vw 50vw 0;
  border: .5em solid #FBCC59;
  background-color: #FBCC59;
}


#daily .section-inner a {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: block;
  width: 95vw;
  height: 60%;
  margin-left: calc(50% - 50vw);

}

/* 破線の調節 */

#daily .section-inner::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0 ,-50%);
  width: calc(95vw - 1.2em);
  height: 50%;
  margin-left: calc(50% - 50vw);
  border-radius: 0 50vw 50vw 0;
  border: .4em dashed #fff;
  border-left-color: #FBCC59;
}


#daily .flex {
  gap: 2em;
}

/* 左側 */
#daily .wrap1 {
  position: relative;
  z-index: 1;
  aspect-ratio: 5 / 4.2;
  width: 50%;
  height: auto;
}


#daily .wrap1 img {
  position: absolute;
  width: 100%;
  height: auto;
  border-radius: 3vw;
  opacity: 0;
  transform: translateX(-10%);

}
#daily .wrap1 img:nth-child(1) {
  z-index: 1;
  top: 0;
  left: 0;
  width: 60%;
  transition: .5s 1.2s ease;
}
#daily .wrap1 img:nth-child(2) {
  width: 80%;
  bottom: 0;
  right: 0;
  transition: .5s 1.4s ease;

}
#daily.active .wrap1 img {
  opacity: 1;
  transform: translateX(0);
}

/* 右側 */

#daily .wrap2 {
  width: 50%;
}

.daily-btn {
  position: relative;
  display: grid;
  align-content: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.daily-btn h2{
  position: relative;
  font-size: 2.5em;
  font-weight: 700;
  color: #58280F;
}

#daily .btn-arrow {
  transform: translate(1.5em , -50%);
  width: 1em;
  background-color: #fff;
}


#daily .btn-arrow::after {
  width: .5em;
  background: url(images/arrow_2.webp) no-repeat center / contain;
}




/* --------------------------------------------- 杜っこBlog --------------------------------------------- */

#blog.section {
  padding: 0;
}

#blog .blog-title {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1em;
  margin-bottom: 3em;
}

#blog h2 {
  transform: translateY(1em);
  opacity: 0;
  transition: .5s ease;
}
#blog.active h2 {
  opacity: 1;
  transform: translateY(0);
}

.blog-title-deco {
  display: flex;
  align-items: end;
  gap: .25em;
  width: 15em;
}

.blog-title-deco img {
  width: calc(100% / 6);
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  animation: blog-deco 5s ease-in-out infinite;
}
.blog-title-deco img:nth-child(2) {
  animation-delay: .2s;
}
.blog-title-deco img:nth-child(3) {
  animation-delay: .4s;
}
.blog-title-deco img:nth-child(4) {
  animation-delay: .6s;
}
.blog-title-deco img:nth-child(5) {
  animation-delay: .8s;
}
.blog-title-deco img:nth-child(6) {
  animation-delay: 1s;
}

@keyframes blog-deco {
  0%, 90%, 100% {
    transform: translate(0, 0) ;
  }
  92% {
    transform: translate(0, -10%) ;
  }
  94% {
    transform: translate(0, 0) ;
  }
  
}

.blog-deco {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translateX(-100%);
  aspect-ratio: 5 / 4;
  width: min(4.5vw, 3em);
  height: auto;
  opacity: 0;
  transition: .5s ease-in-out;
}
.active .blog-deco {
  opacity: 1;
  transform: translateX(0);
}

.blog-deco img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.blog-deco1 {
  transform: translateX(-250%);
  transition: .5s .2s ease-in-out;
}
.active .blog-deco1 {
  transform: translateX(-150%);

}

/* 投稿一覧 */
#slider2 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: 2em;
}

#slider2 .splide__list.no-post {
  justify-content: center;
  transform: initial !important;
}

#blog .splide__track {
  overflow: initial;
}

#blog .splide__slide {
  pointer-events: none;
  position: relative;
  width: 100%;
  height: auto;
}

#blog .splide__slide .tag{
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-10%, -50%);
  aspect-ratio: 1 / 1;
  width: 4em;
  height: auto;
  border-radius: 50vw;
}
#blog .splide__slide .tag.blog {
  background: url(images/blog_icon_1.webp) no-repeat center / contain;
}
#blog .splide__slide .tag.schedule {
  background: url(images/blog_icon_2.webp) no-repeat center / contain;
}
#blog .splide__slide .tag.lunch {
  background: url(images/blog_icon_3.webp) no-repeat center / contain;
  }
#blog .splide__slide .tag.recipe {
  background: url(images/blog_icon_4.webp) no-repeat center / contain;
}

#blog .splide__slide .tag::after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  padding-bottom: .3em;
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: .8em;
  font-weight: 700;
  color: #fff;

}
#blog .splide__slide.blog_log .tag::after {
  content: 'ブログ';
}
#blog .splide__slide.lunch .tag::after {
  content: '給 食';
}
#blog .splide__slide.recipe .tag::after {
  content: 'レシピ';

  }
#blog .splide__slide.apple .tag::after {
  content: 'りんご';
}

#blog .btn {
  display: block;
  margin: 0 auto;
}


/* --------------------------------------------- お問い合わせ(共通) --------------------------------------------- */

#contact p {
  font-weight: 600;
  color: #58280F;
}


#contact.section {
  padding: 10vw 0 0 0 ;
}

#contact .section-inner {
  position: relative;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto 2em auto;
  padding: 5em;
  border-radius: 5vw;
  text-align: center;
  background: #fff url(images/contact_1.webp) repeat-x top center / 50%;
}

#contact .section-inner span.deco {
  position: absolute; 
  top: 0;
  left: 0;
  aspect-ratio: 1 / 1;
  width: 10em;
  height: auto;
  border-radius: 5vw 0 0 0;
  overflow: hidden;
}
#contact .section-inner span.deco.deco2 {
  left: auto;
  right: 0;
  transform: rotate(90deg);
}

#contact .section-inner span.deco::before,
#contact .section-inner span.deco::after  {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3.5em;
  height: 100%;
  border-radius: 0 0 3vw 0;
  background-color: #FBCC59;
}
#contact .section-inner span.deco::before {
  z-index: 1;
}
#contact .section-inner span.deco::after {
  width: 100%;
  height: 3.5em;
  border-radius: 0 0 3vw 0;
  background-color: #F24D2C;
}

#contact .contact-title {
  margin-bottom: 2em;
}

#contact h2 {
  margin-bottom: .5em;
}

#contact .contact-title p {
  font-size: 1.2em;
  font-weight: 700;
  color: #58280F;
}

#contact .flex-wrap {
  width: 50%;
}

#contact .flex-wrap.wrap2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

#contact p.tel {
  margin-bottom: .1em;
  font-size: 3.2em;
  font-size: min(4vw, 3.2em);
  line-height: 1;
}

#contact p.tel span {
  margin-right: .5em;
  font-size: .25em;
}

#contact p.tel a {
  color: #58280F;
}

#contact .btn::before {
  box-sizing: border-box;
  border: .2em solid #F24D2C;
  background-color: #F24D2C;
}
#contact .btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0 , .2em);
  display: block;
  width: calc(100% + .2em);
  height: 100%;
  border-radius: 50vw;
  box-sizing: border-box;
  border: .2em solid #FBCC59;
  background-color: #FBCC59;
}

#contact .btn a {
  color: #fff;
}

#contact .btn-arrow {
  background-color: #fff;
}

#contact .btn-arrow::after {
  background: url(images/arrow_3.webp) no-repeat center / contain;
}


/* --------------------------------------------- アクセス(共通) --------------------------------------------- */

#acsses {
  position: relative;
}
#acsses::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  transform: translateY(-99%);
  width: 100vw;
  height: 25vw;
  margin-left: calc(50% - 50vw);
  background: url(images/bg_acsses.webp) no-repeat center top / cover;
}

#acsses::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 101%;
  margin-left: calc(50% - 50vw);
  background-color: #E1F6A6;
}

#acsses.section {
  padding: 0 0 5em 0;
}

#acsses .section-inner {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

#acsses .flex {
  justify-content: space-between;
  gap: 2em;
  padding-left: 2em;
}
#acsses .flex p {
  font-size: min(1.8vw , 1.2em);
  color: #58280F;
}

#acsses .flex h2 span {
  transform: translateY(.15em);
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 50vw;
  background-color: #F24D2C;
  background: #F24D2C url(images/map-icon_1.webp) no-repeat center / .4em;
}

#acsses .flex-wrap.wrap1 {
  width: auto;
}

#acsses .flex-wrap.wrap2 {
  overflow: hidden;
  aspect-ratio: 2 / 1;
  width: 65%;
  height: auto;
  border-radius: 3vw;
}


/* --------------------------------------------- フッダー(共通) --------------------------------------------- */


#footer {
  margin: 0;
  padding: 0;
  font-size: min(1.82vw , 1em);
  background-color: #E1F6A6;
}


#footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 3em;
  max-width: 1200px;
  margin: 0 auto 2em auto;
}

.footer-logo {
  position: relative;
  width: 10em;
}

.footer-logo a {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#menu-footer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 1em 2em;
}

#menu-footer-menu a {
  font-weight: 700;
  color: #58280F;
}

.copyright {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 1em;
  font-size: 12px;
}


/* ブログ固定(共通) */
#blog-fiexd {
  pointer-events: none;
  position: fixed;
  z-index: 99;
  top: 50%;
  right: 0;
  transform: translate(0 , -50%);
  padding: 2em 1em;
  font-size: min(1.5vw , .7em);
  opacity: 0;
  transition: 1s ease;
}
.go-to-top-visible #blog-fiexd {
  opacity: 1;
  pointer-events: auto;
}

#blog-fiexd a {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#blog-fiexd::before,
#blog-fiexd::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 3em 0 0 3em;
  background-color: #F24D2C;
  transition: .2s ease;
}
#blog-fiexd::before {
  border: .3em solid #F24D2C;
}
        

#blog-fiexd::after {
  z-index: 1;
  transform: translate(-8% , 3%);
  width: 120%;
  background-color: #FBCC59;
}

#blog-fiexd .inner {
  position: relative;
  z-index: 3;
}
#blog-fiexd p {
  color: #fff;
}

#blog-fiexd p.mori_1 {
  font-size: 2.5em;
  font-weight: 500;
}
#blog-fiexd p.mori_2 {
  text-align: right;
}
#blog-fiexd p {
  line-height: 1;
  text-align: center;
  font-size: 1.6em;
  font-weight: 700;
}

#blog-fiexd img {
  width: 3em;
  height: auto;
}

.blog-img {
  position: relative;
  aspect-ratio: 9 / 10;
  width: 3em;
  height: auto;
}
.blog-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.blog-img img.icon-w {
  z-index: 1;
  opacity: 1;
}

/* TOPへ戻るボタン(共有) */


#top-btn {
  pointer-events: none;
  position: fixed;
  z-index: 99;
  bottom: 1%;
  right: 5%;
  width: 2.5em;
  text-align: center;
  opacity: 0;
  transition: 1s ease;
}
.go-to-top-visible #top-btn {
  opacity: 1;
  pointer-events: auto;
}

#top-btn img {
  width: 100%;
  height: auto;
  transform: rotateY(0);
  transition: 1s ease;
}

#top-btn.active img {
  transform: rotateY(360deg);
}

#top-btn p {
  color: #F24D2C;
  font-size: .8em;
  font-weight: 700;
}


.mobile-footer-menu-buttons {
  display: none;
}

.breadcrumb {
  display: none;
}


/* タイトル(共通) */

.title {
  width: 100%;
  margin-bottom: 5vw;
  text-align: center;
  background: url(images/contact_1.webp) repeat-x center 58% / 28%;
}

.title h3 {
  display: inline-block;
  padding: 0 1em;
  text-align: center;
  letter-spacing: .1em;
  font-size: 2.5em;
  color: #58280F;
  background-color: #E1F6A6;
  opacity: 0;
  transform: translateY(1em);
  transition: .5s ease;
}
.title.active h3 {
  opacity: 1;
  transform: translateY(0);
}

.title.title-w h3 {
  background-color: #fff;
}


table:not(.has-border-color) :where(th, td),
table tr:nth-of-type(2n+1) {
  background-color: initial;
  border: 0;
}

table th, table td {
  padding: 0 0 1em 0;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-size: 1em;
}

table th {
  padding-right: 1em;
  vertical-align: top;
  font-weight: 700;
}

.title_2,
.title_3  {
  margin-bottom: 3em;  
  text-align: center; 
}
.title_2 h3,
.title_3 h3  {
  position: relative;
  display: inline-block;
  font-size: 2em;
  color: #58280F;
  opacity: 0;
  transform: translateY(1em);
  transition: .5s ease;
}
.title_2.active h3 ,
.title_3.active h3 {
  opacity: 1;
  transform: translateY(0);
}

.title_2 p,
.title_3 p {
  font-weight: 700;
}

.title_3 h3::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -10%);
  aspect-ratio: 10 / 1;
  width: calc(100% + 4em);
  height: auto;
  background: url(images/crayon.webp) no-repeat center / contain;
}

.flex-wrap {
    width: 50%;
    height: auto;
    position: relative;
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

@media screen and (max-width: 834px){

  main.main, div.sidebar {
    padding: 0;
  }
}


/* ホバー */
@media screen and (min-width: 769px){

  /* メニュー */
  .navi-in a:hover {
    color: #F24D2C;
    background-color: transparent;

  }

  /* ボタン */
  .btn:hover::before {
    transform: translate(.1em , .1em);
    background-color: #F24D2C;

  }
  .btn:hover a {
    color: #fff;
  }
  .btn:hover .btn-arrow::after {
    background: url(images/arrow_3.webp) no-repeat center / contain;
  }
  .btn:hover .btn-arrow {
    background-color: #fff;
  }

  #contact .btn:hover::before {
    transform: translate(0 , .2em);
    width: calc(100% + .2em);
    border: .2em solid #F24D2C;
    background-color: #fff;
  }
  #contact .btn:hover a {
    color: #F24D2C;
  }

  #contact .btn:hover .btn-arrow {
    background-color: #F24D2C;
  }

  #contact .btn:hover .btn-arrow::after {
    background: url(images/arrow_1.webp) no-repeat center / contain;
  }

  /* 固定 */

  #blog-fiexd:hover::before {
    transform: translate(-8%, 3%);
    width: 120%;
    border: .3em solid #F24D2C;
    background-color: #fff;
  }

  #blog-fiexd p {
    transition: .2s ease;
  }
  
  #blog-fiexd:hover p {
    color: #F24D2C;
  }

  #blog-fiexd:hover .blog-img img.icon-w  {
    opacity: 0;
  }

  /* 園での生活 */
  #daily .section-inner,
  #daily .section-inner::before,
  #daily .section-inner::after {
    transition: .2s ease;

  }

  #daily .section-inner:hover {
    transform: scale(1.05);
  }

  #daily .section-inner:hover::before {
    border: .5em solid #FBCC59;
    background-color: #fff;

  }

  #daily .section-inner:hover::after {
    border: .4em dashed #FBCC59;
    border-left-color: #fff;
  }
  

  /* フッター */
  #menu-footer-menu a {
    transition: .2s ease;
  }
  #menu-footer-menu a:hover {
    color: #F24D2C;
  }

  /* トップへ */
  #top-btn {
    transform: scale(1);
    transition: .2s ease;
  }
 
  #top-btn:hover {
    transform: scale(1.1);
  }

  /* 下層インディックスメニュー */

  .anchor-nav li,
  .anchor-nav li::before {
    transition: .2s ease;
  }

  .anchor-nav li:hover::before {
    transform: translate(0, .15em);
    width: calc(100% + .2em);
    height: 104%;
    background: #F24D2C url(images/arrow-btn_2.webp) no-repeat 93% / 1em;
  }

  .anchor-nav li:hover a {
    color: #fff;
  }

  .anchor-nav li:hover {
    border: #fff solid .1em;
  }


  

}


@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/

  body {
    overflow-x: hidden;
  }

  .pc,
  .pc-title {
    display: none;
  }
  .sp {
    display: block;
  }
  .sp-title {
    display: inline-block;
  }

  h1,
  h2,
  h3,
  p  {
    text-align: left;
  }

  .daily-fv .key-img {
    background: url(images/daily-key_sp.webp) no-repeat center / cover;
  }


  .btn-cont p {
    text-align: center;
    font-size: min(3.75vw , 14px);
  }

  .section {
    padding: 20vw 0;
    font-size: min(6.25vw, 1em);
  }

  .section-inner {
    width: 100%;
  }

  h2 {
    font-size: 1.71em;
  }


  #contact .flex {
    flex-wrap: wrap;
    gap: 2em;
  }
  #contact .flex-wrap {
    width: 100%;
  }
  #contact .flex-wrap:nth-child(1) {
    position: relative;
  }
  #contact .flex-wrap:nth-child(1)::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(1em);
    width: 100%;
    height: 3px;
    border-radius: 50vw;
    background: #F24D2C;
  }

  #contact p.tel {
    font-size: 3.6em;
  }

  /* ヘッダー */


  .header-container-in.hlt-top-menu .header {
    height: auto;
  }

  .header {
    position: fixed;
  }

  #header-in {
    transform: translateY(.5em);
    align-items: center;
    width: 90%;
    margin-top: 0;
  }

  .header-logo {
    width: 18.5em;
    min-width: auto;
  }

  .header-logo a img:hover {
    transform: scale(1);
  }

  .header-container-in.hlt-top-menu .navi {
    position: absolute;
    display: block;
    z-index: 12;
    top: 0;
    left: 0;
    transform: translate(100% , -.5em);
    width: 100vw;
    height: 100vh;
    margin-left: calc(50% - 50vw);
    margin-top: 0;
    background-color: #fff;
    transition: .5s ease;
  }
  .header-container-in.hlt-top-menu .navi.active {
    transform: translate(0 , -.5em);
  }

  .menu-global_mane-container {
    padding: 16vh 2em;
  }

  .header-container-in.hlt-top-menu .wrap {
    width: 100%;
  }

  .navi-in a {
    font-size: 1.2em;
  }

  #header-container {
    position: fixed;
    font-size: min(3.75vw, 1em);
  }
  

  #header-container .header-bg::before {
    height: 18vw;
    max-height: 5em;
    background: url(images/header-c-sp.webp) repeat-x center top / contain;
  }

  .header-container-in {
    width: 95%;
  }

  #header-in nav ul {
    flex-direction: column;
    gap: 1.5em;
  }

  #header-in li {
    padding-bottom: .5em;
    border-bottom: .3em dashed #F24D2C;
  }


  /* ハンバーガー */
  #hamburger {
    position: relative;
    aspect-ratio: 1 / 1;
    z-index: 13;
    width: 3.5em;
    max-width: 60px;
  }

  #hamburger::before,
  #hamburger::after {
    content: '';
    inset: 0;
    position: absolute;
    display: block;
    border-radius: 50%;
  }

  #hamburger::before {
    z-index: 2;
    background-color: #fff;
  }

  #hamburger::after {
    z-index: 1;
    transform: translate(7%, 5%);
    background-color: #F24D2C;
  }

  #hamburger span {
    position: absolute;
    z-index: 3;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 3px;
    border-radius: 50vw;
    background-color: #F24D2C;
    transition: .2s ease;
  }

  #hamburger span:nth-child(1) {
    top: 25%;
    transform: translate(-50% , 0) rotate(0);
  }
  #hamburger.active span:nth-child(1) {
    top: 50%;
    transform: translate(-50% , -50%) rotate(45deg);
  }

  #hamburger span:nth-child(2) {
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  #hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  #hamburger span:nth-child(3) {
    bottom: 25%;
    transform: translate(-50% , 0) rotate(0);
  }
  #hamburger.active span:nth-child(3) {
    bottom: 50%;
    transform: translate(-50% , 50%) rotate(-45deg);
  }

  .bg-item {
    width: 50vw;
    max-width: 15em;
  }


  /* ブログアイコン */
  .blog-icon {
    position: absolute;
    z-index: 11;
    right: 0;
    bottom: 0;
    transform: translate(10% , 120%);
    aspect-ratio: 1 / 1;
    width: 4em;
    max-width: 70px;
    height: auto;
  }
  .blog-icon img {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .blog-icon img.close {
    opacity: 0;
    transition: .2s ease;
  }
  .blog-icon.active img.close {
    opacity: 1;
  }

  .blog-icon a {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
  }


  /* FV */
  .fv {
    aspect-ratio: auto;
    height: 90vh;
    max-height: 650px;
    font-size: min(3.75vw, 1em);
  }
  .splide__slide img {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
  }



  #slider1.splide {
    border-radius: 0 0 min(40vw, 40em) min(40vw, 40em);
  }


  .fv-inner {
    width: 95%;
  }

  .fv-title {
    position: absolute;
    left: 0;
    transform: translateY(7vh);
    padding-top: 35vw;
    font-size: min(6.25vw, 1em);

  }

  .fv-title h2 {
    font-size: 2em;
  }

  .btn-flex {
    gap: 1em;
    text-align: center;
  }

  .btn-flex .btn-cont {
    width: 7em;
    max-width: 110px;
  }

  .btn-flex .btn-cont:hover {
    transform: scale(1);
    border: 0;
    background-color: #F24D2C;
  }
  .btn-flex .btn-cont:hover p {
    color: #fff;
  }
  .btn-cont:hover .btn-img img.btn-w {
    z-index: 1;
  }

  /* 装飾 */

  .fv-deco {
    font-size: min(6.25vw, .4em);
  }

  .deco-item {
    width: 7em;
  }
  .fv-deco .deco-item.deco-item1  {
    bottom: 16%;
    transform: translate(0, 50%) scaleX(-1);
  }
  @keyframes deco1 {
    0% {
      opacity: 0;
      transform: translate(0, 50%)  scale(-1, 1) ;
    }
    50% {
      transform: translate(0, 50%)  scale(-1.1, 1.1) ;
    }
    100% {
      opacity: 1;
      transform: translate(0, 50%)  scale(-1, 1) ;
    }
  }
@keyframes deco1-1 {
    0%, 90%, 100% {
      transform: translate(0, 50%) scale(-1, 1);
    }
    92% {
      transform: translate(0, 40%) scale(-1, 1);
    }
    94% {
      transform: translate(0, 50%) scale(-1, 1);
    }
  }

  .fv-deco .deco-item.deco-item2 {
    bottom: 6%;
    left: 5%;
    width: 5.5em;
  }  
  
  .fv-deco .deco-item.deco-item3 {
    left: 28%;
    transform: translate(-50%, 35%);
    width: 12em;
  }
  @keyframes deco3-1 {
  0%, 90%, 100% {
    transform: translate(-50%, 35%);
  }
  92% {
    transform:translate(-50%, 25%);
  }
  96% {
    transform: translate(-50%, 35%);
  }
}

  .fv-deco .deco-item.deco-item4 {
    bottom: 12%;
    right: 0;
    transform: translate(-12%, 50%);
    width: 5em;
  }
  @keyframes deco4 {
  0% {
    opacity: 0;
    transform: translate(-12%, 50%) scale(1) ;
  }
  50% {
    transform: translate(-12%, 50%) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translate(-12%, 50%) scale(1, 1) ;
  }
}
@keyframes deco4-1 {
  0%, 90%, 100% {
    transform: translate(-12%, 50%) scale(1) ;
  }
  92% {
    transform: translate(-12%, 40%) scale(1) ;
  }
  96% {
    transform: translate(-12%, 50%) scale(1) ;
  }
}

  .fv-deco .deco-item.deco-item5 {
    bottom: 12%;
    right: 0;
    transform: translate(0, -50%);
    width: 4em;
  }
  @keyframes deco5 {
  0% {
    opacity: 0;
    transform: translate(0 , -50%) scale(1) ;
  }
  50% {
    transform: translate(0 , -50%) scale(1.1) ;
  }
  100% {
    opacity: 1;
    transform: translate(0 , -50%) scale(1, 1) ;
  }
}
@keyframes deco5-1 {
  0%, 90%, 100% {
    transform: translate(0 , -50%) scale(1) ;
  }
  92% {
    transform: translate(0 , -60%) scale(1) ;
  }
  96% {
    transform: translate(0 , -50%) scale(1) ;
  }
}

  .fv-deco .deco-item.deco-item6 {
    top: 55%;
    width: 10em;
  }
  .fv-deco .deco-item.deco-item7 {
    top: 60%;
    width: 5em;
  }

  /* 杜こども園について */
  #about.section {
    padding: 45vw 0 20vw 0;
  }
  
  #about .flex {
    flex-direction: column;
  }
  #about .flex-wrap {
    width: 100%;
  }

  #about .wrap-inner {
    width: 100%;
    max-width: initial;
    text-align: center;
  }

  #about p {
    max-width: initial;
    margin-bottom: 2em;
  }

  .about-deco .deco-item.deco-item1 {
    transform: translate(-25%, -120%);
    width: min(30vw, 30em);
  }
  @keyframes tree {

    0%, 85%, 100% {
      transform: translate(-25%, -120%) rotate(0);
    }
    90% {
      transform: translate(-5% , -90%) rotate(5deg);
    }
    96% {
      transform: ttranslate(-5% , -90%) rotate(0);
    }
    
  }

  .about-img {
    aspect-ratio: 5 / 3;
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 1.5em;
    border-radius: 3vw;
  }

  .about-leaf {
    opacity: 0;
  }

  .about-deco2 {
    left: 30%;
    transform: translate(-250%, 0) scaleX(-1);
    width: 1.8em;
  }
  .about-deco2.active {
    transform: translate(0, -250%) scaleX(-1) rotate(0);
}

  #about .flex-wrap.wrap2 {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  #about .wrap2 .deco {
    position: relative;
    bottom: 0;
    right: 0;
    transform: translate(0, 0);
    aspect-ratio: auto;
    width: 65%;
    margin-left: auto;

  }
  #about .active .wrap2 .deco {
    opacity: 0;
  }
  #about .wrap2.active .deco {
    opacity: 1;
  }


  #about .wrap2 .deco img {
    aspect-ratio: 10 / 9;
    width: 100%;
    height: auto;
    margin-bottom: 1em;
    border-radius: 3vw 0 0 3vw;

  }
    #about .wrap2 .deco::after {
    display: none;
  }

  #about .wrap2 .deco-sp {
    position: relative;
    width: 50%;
    height: auto;
  }
  #about .active .wrap2 .deco-sp {
    opacity: 0;
  }
  #about .wrap2.active .deco-sp {
    opacity: 1;
  }

  #about .wrap2 .deco-sp img {
    aspect-ratio: 5 / 4;
    width: 100%;
    border-radius: 0  3vw 3vw 0;

  }
  #about .wrap2 .deco-sp::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(1.5em, -98%);
    aspect-ratio: 2 / 1;
    width: 4em;
    height: auto;
    background: url(images/deco_2-sp.webp) no-repeat center / contain;
  }

  .about-deco4 {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(-3.5em , 0);
    aspect-ratio: 10 / 9.5;
    width: 4.5em;
    text-align: center; 

  }

  .about-deco4 img {
    width: calc(100% / 2 - 1em);
    height: auto;
    object-fit: contain;
  }

  .about-deco4 .flex-sp {
    position: absolute;
    top: 70%;
    transform: translate(0, -50%);
    display: flex;
    justify-content: space-between;
    height: auto;

  }

  .about-deco4 .flex-sp img {
    width: calc(100% / 2 - 1em);
  }

  .about-deco5 {
    position: absolute;
    bottom: auto;
    top: 0;
    right: 0;
    transform: translate(150%, 80%) scaleX(-1);
    aspect-ratio: 5 / 4;
    width: 2.5em;
    text-align: center;
  }


  /* コンテンツ */

  #cnt.section {
    padding: 15vw 0 calc(15vw + 20%) 0;
  }

  .cnt-title {
    font-size: 1.2em;
  }

  #cnt .flex {
    flex-direction: column;
  }

  #cnt .flex-wrap.wrap1 {
    width: 90%;
  }

  #cnt .flex-wrap.wrap2 {
    width: 90%;
  }

  .cnt-title::before {
    width: 10em;
  }
  
  .cnt-title::after {
    width: 9em;
  }
  .cnt-img {
    position: relative;
    transform: translateX(-10%);
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  #cnt .flex.flex2 .cnt-img {
    transform: translateX(10%);
  } 

  #cnt .cnt-text {
    width: 100%;
    text-align: center;
  }

  #cnt .flex2 .cnt-title {
    right: auto;
  }

  #cnt .flex-wrap.wrap2::before {
    display: none;
  }

  #cnt .flex.flex1,
  #cnt .flex.flex2 {
    position: relative;
  }
  #cnt .flex.flex1::before,
  #cnt .flex.flex2::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    width: 125vw;
    height: 110%;
    border-radius: 45vw 70vw 55vw 55vw;
    background: #fff;
  }
  #cnt .flex.flex2::before {
    border-radius: 70vw 45vw 55vw 55vw;
  }

  #cnt.section::before,
  #cnt.section::after {
    height: 3em;
  }
  .cnt-leaf img {
    width: 5em;
  }

  .cnt-deco1_1 {
    top: 50%;
    left: 0;
    transform: translate(-60% , -50%);
    aspect-ratio: 2 / 5;
    max-width: 3em;
  }

  .cnt-deco1_2 {
    bottom: 15%;
    right: 0;
    transform: translate(-100%, 0);
    width: 10vw;
    max-width: 4em;
  }
  .cnt-deco1_3 {
    bottom: 30%;
    right: 0;
    transform: translate(-50%, 0%);
    width: 5vw;
    max-width: 2.5em;
  }
  .cnt-deco1_4 {
    top: 0;
    left: 0;
    transform: translate(-80% , 0) rotate(-30deg);
    width: 15vw;
  }
  .active .cnt-deco1_4 {
    transform: translate(0, -80%) rotate(0);
  }

  .cnt-deco1_5 {
    top: 0;
    right: 0;
    transform: translate(-50%, 20) rotate(30deg);
    width: 18vw;
    max-width: 5em;
  }
  .active .cnt-deco1_5 {
    transform: translate(20%, -50%) rotate(-5deg);
  }

  .cnt-deco1_6 {
    right: 0;
    bottom: 16%;
    transform: translate(-20% , -20%) rotate(10deg);
    width: 8vw;
  }

  .cnt-deco2_1 {
    right: auto;
    left: 0;
    transform: translate(0, -100%);
    width: 14vw;
    max-width: 4em;
  }
  .cnt-deco2_2 {
    transform: translate(50%, -40%);
    width: 10vw;
    max-width: 3em;
  }
  .active .cnt-deco2_2 {
      transform: translate(50%, -50%);
  }

  .cnt-deco2_3 {
    transform: translate(-100%, -50%);
    width: 9vw;
    max-width: 2.5em;
  }
  .cnt-deco2_4 {
    top: 0;
    right: 0;
    transform: translate(0%, 50%);
    aspect-ratio: 3 / 5;
    width: 8vw;
    max-width: 1.5em;
  }

  #cnt.section.bg_1 {
    padding: 20vw 0 30vw 0;
  }

  .cnt-title h2 {
    font-size: 1.5em;
  }


  /* 園での生活 */
  #daily.section {
    position: relative;
    margin-bottom: 20vw;
    padding: 25vw 0 0 0;

  }

  #daily .section-inner {
    margin-bottom: 5em;
    padding: 3em 0;
  }
  #daily .section-inner::before {
    height: 100%;
  }
  #daily .section-inner::after {
    height: 85%;
    width: clamp(20.5em, calc(94vw - 0.5em), 93vw);
    border: .3em dashed #fff;
    border-left-color: #FBCC59;

  }

  #daily .wrap2 {
    width: 100%;
  }

  .daily-btn h2 {
    font-size: 1.8em;
  }

  .daily-deco2 {
    transform: translate(-20%, 50%) rotate(20deg);
    width: 3.5em;
  }
  .active .daily-deco2 {
    opacity: 1;
    transform: translate(0, -50%) rotate(0);
  }

  .daily-deco3 {
    transform: translate(-170%, -50%) rotate(20deg);
    width: 2em;
  }
  .active .daily-deco3 {
    transform: translate(-150%, -170%) rotate(0);
  }

  #daily .wrap1 {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  #daily .wrap1 img {
    position: initial;
    display: block;
    height: auto;
    object-fit: cover;
    border-radius: 5vw;
  }
  #daily .wrap1 img:nth-child(1) {
    aspect-ratio: 5 / 4;
    width: 80%;
    max-height: 350px;
    margin-left: auto;
    margin-bottom: 1em;
    border-radius: 5vw 0 0 5vw;
  }

  #daily .wrap1 img:nth-child(2) {
    aspect-ratio: 10 / 7;
    width: 65%;
    max-width: 400px;
    margin-left: 1em;
  }

  .daily-deco1 {
    transform: translate(50% , -30%);
  }

  .blog-deco {
    width: 1.5em;
    transition: .5s 1s ease-in-out;
  }
  
  
  #blog-fiexd {
    font-size: min(2.2vw , .55em);
    top: 20%;
    top: 40%;
  }

  /* ブログ */

  #blog h3 {
    overflow: hidden;           
    text-overflow: ellipsis; 
    white-space: nowrap;       
    font-size: 1.28em;
  }

  #slider2 {
    margin-bottom: 1em;
  }


  .blog-title-deco {
    gap: 0;
    width: calc(100% - 12em);
    max-width: 10em;
  }

  .blog-title-deco img {
    width: calc(100% / 6);
  }

  #slider2 {
    margin-left: auto;
  }

  #blog .splide,
  #blog .splide__track,
  #blog .splide__list,
  #blog .splide__slide {
    width: 100%;
    height: 100%;
    max-height: initial;
  }
  #blog .splide__slide img {
    aspect-ratio: 10 / 7;
    margin: 0 auto;
    display: block;
  }

  /* お問い合わせ */

  #contact.section {
    padding: 25vw 0 0 0;
  }

  #contact .section-inner {
    width: 100%;
    padding: 2.5em;
  }
  

  #contact .contact-title {
    margin-bottom: 1.5em;
  }

  #contact .section-inner span.deco {
    width: 5em;
  }

  #contact .section-inner span.deco::before, 
  #contact .section-inner span.deco::after {
    width: 2em;
  }
  
  #contact .section-inner span.deco::after {
    width: 100%;
    height: 2em;
  }

  #contact p.tel {
    font-size: 3em;
  }

  /* アクセス */

  #acsses .section-inner {
    width: 100%;
  }

  #acsses .flex {
    flex-direction: column;
    padding-left: 0;
  }

  #acsses .flex-wrap {
    width: 100%;
  }

  #acsses .flex p {
    font-size: 1em;
  }

  #acsses .flex-wrap.wrap2 {
    width: 100%;
    aspect-ratio: 3 / 2;
  }

  /* フッター */

  #footer {
    font-size: min(6.25vw, 1em);
  }

  #footer .wrap {
    flex-direction: column-reverse;
    gap: 1.5em;
    margin: 0 auto 1em;
  }

  .sp-map p {
    text-align: center;
    margin-bottom: 1em;
  }
  .sp-map a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25em;
    color: #F24D2C;
    font-weight: 700;
  }
  .sp-map a::before {
    content: '';
    display: inline-block;
    aspect-ratio: 1 / 1;
    width: 1.5em;
    height: auto;
    border-radius: 50vw;
    background: #F24D2C url(images/map-icon.webp) no-repeat center / 50%;
  }
  
  .sp-map {
    margin-bottom: 2em;
    text-align: center;
  }

  #menu-footer-menu {
    gap: 1em;
  }

  .footer-logo {
    width: 14em;
    margin: 0 auto;
  }

  .copyright {
    text-align: center;
    font-size: 8px;
  }

  #contact {
    position: relative;
  }

  #contact::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(2em);
    width: 100vw;
    height: 50%;
    margin-left: calc(50% - 50vw);
    background-color: #E1F6A6;
  } 

  #contact.section h2,
  #contact.section p {
    text-align: center;
  }

   #contact.section p {
    font-size: 1em;
   }
   #contact.section p.tel {
    font-size: 2.3em;
   } 
  #contact p.tel span {
    font-size: .35em;
  }

  /* 下層キービジュアル */
  .key-visual {
    aspect-ratio: 1 / 1;
    font-size: min(6.25vw, 1em);
  }

  .key-deco {
    max-height: initial;
  }

  .key-deco .deco-item1 {
    width: 8vw;
    bottom: 20%;
  }

  .key-deco .deco-item2 {
    width: 5vw;
    bottom: 25%;
    transform: translate(100%, 0);
    animation: 
    key-deco2 1s 0.2s ease-in-out forwards,
    key-deco2-1 15s ease-in-out infinite;
  }
    @keyframes key-deco2 {
    0% {
      opacity: 0;
      transform: translate(100%, 0) scale(-1 , 1);
    }
    50% {
      transform: translate(100%, 0) scale(-1.1 , 1.1);
    }
    100% {
      opacity: 1;
      transform: translate(100%, 0) scale(-1 , 1);
    }
  }
  @keyframes key-deco2-1 {
    0%, 90%, 100% {
      transform: translate(100% , 0) scale(-1, 1);
    }
    92% {
      transform: translate(100% , 10%) scale(-1, 1);
    }
    94% {
      transform: translate(100% , 0) scale(-1, 1);
    }
}

  .key-deco .deco-item3 {
    width: 6vw;
    transform: translate(-100% , 0);
    animation: 
    key-deco3 1s 0.2s ease-in-out forwards,
    key-deco3-1 15s ease-in-out infinite;
  }
  @keyframes key-deco3 {
    0% {
      opacity: 0;
      transform: translate(-100%, 0) scale(-1 , 1);
    }
    50% {
      transform: translate(-100%, 0) scale(-1.1 , 1.1);
    }
    100% {
      opacity: 1;
      transform: translate(-100%, 0) scale(-1 , 1);
    }
  }
  @keyframes key-deco3-1 {
    0%, 90%, 100% {
      transform: translate(-100% , 0) scale(-1, 1);
    }
    92% {
      transform: translate(-100% , 10%) scale(-1, 1);
    }
    94% {
      transform: translate(-100% , 0) scale(-1, 1);
    }
  }

  .key-deco .deco-item4 {
    width: 6vw;
    transform: translate(0 , 50%);
    animation: 
    key-deco3 1s 0.2s ease-in-out forwards,
    key-deco3-1 15s ease-in-out infinite;

  }
  @keyframes key-deco4 {
    0% {
      opacity: 0;
      transform: translate( 0, 50%) scale(-1 , 1);
    }
    50% {
      transform: translate( 0, 50%) scale(-1.1 , 1.1);
    }
    100% {
      opacity: 1;
      transform: translate( 0, 50%) scale(-1 , 1);
    }
  }
  @keyframes key-deco4-1 {
    0%, 90%, 100% {
      transform: translate( 0 , 50%) scale(-1, 1);
    }
    92% {
      transform: translate( 0 , 60%) scale(-1, 1);
    }
    94% {
      transform: translate( 0 , 50%) scale(-1, 1);
    }
  }

  .key-deco.key-deco-right .deco-item3 {
    right: 10%;
  }

  .key-deco.key-deco-right .deco-item1 {
    bottom: 12%;
  }
  
  .key-deco.key-deco-right .deco-item2 {
    bottom: 20%;
    left: 54%;
  }

  .fv-title2 {
    bottom: 0;
  }

  .fv-title2 h2 {
    margin-left: 0;
    font-size: 2em;
  }
  
  .fv-title2 .inner.key-right {
    width: 100%;
    
  }
  .fv-title2 .key-right h2 {
    margin-right: 0;
    text-align: right;
  }

  .anchor-nav.sp {
    padding-top: 1em;
  }
  .anchor-nav ul {
    flex-direction: column;
  }

  .title h3 {
    font-size: 1.71em;
  }

  .title {
    background: url(images/contact_1.webp) repeat-x center 58% / 50%;
    margin-bottom: 2em;
  }

  .section.bg_1::before {
    transform: translateY(-50%);
  } 

  .section.bg_1::after {
    transform: translateY(50%) scaleY(-1);

  }

  .title_2 h3, .title_3 h3 {
    font-size: 1.71em;
  }
  
  .title_3 h3::after {
    width: calc(100% + 3em);
  }

  .neko {
    transform: translateY(70%);
  }


}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/

  .pc-2 {
    display: none;
  }
  #header-container .header-bg::before {
    display: none;
  }

  .bg-item {
    width: 100vw;
    max-width: initial;
  }

  #header-container .header-bg {
    aspect-ratio: 10 / 3;
  }
  .sp-4 {
    display: block;
  }

}


/*834px以下*/
@media screen and (max-width: 400px){
  .sp-3 {
    display: block;
  }
}