@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
*/

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


/* 全体 */

body {
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #fff;
}

.cf::after {
  display: none;
}

.sidebar {
  display: none;
}

ol, ul {
  padding-left: 0;
}

li {
  list-style: none;

}

.wp-block-list li {
  list-style: inside;
}

ol.wp-block-list  li {
  list-style-type: decimal;
}



.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
}

p,a,h1,h2,h3 {
  font-family: "Zen Maru Gothic", sans-serif;
  letter-spacing: .05em;
  color: #333;
}


.wrap {
  width: 100%;
  max-width: 1440px;
}

.sub-menu {
  display: none !important;
}

.sec {
  width: 100%;
  height: auto;
  padding: 8em 0;
  font-size: min(1.36vw , 18px);
}

.sec_in {
  width: 90%;
  max-width: 1440px;
  margin: 0 auto;
}


/* 左電車 */

.l-train {
  position: relative;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  width: 100vw;
  height: 100%;
  max-width: 1900px;
  font-size: min(1.36vw , 18px);
  background-color: #fff;
}

.train_f_sen {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 15em);
  background: url(images/senro-2.webp) repeat-y left center;
  background-position-x: 2%;
  background-size: min(5vw, 3em);
}


.train_f_i {
  position: fixed;
  top: -10%;
  left: .7em;
  width: min(4vw, 3.3em);
  opacity: 0;
}

/* 親にmoveがついたら発動 */
.l-train.move .train_f_i {
  animation: trainFlow 20s linear infinite;
  opacity: 1;
}
@keyframes trainFlow {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(210em);
  }
}



.train_f_i img {
  width: 100%;
  object-fit: contain;
  animation: train-bounce .6s ease-in-out infinite;
  transition: top .6s ease;
}

@keyframes train-bounce {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(-3px); }
}

.go-to-top {
  right: 40px;
  bottom: 26px;

}
.go-to-top:hover {
  animation: top-btn 1s ease-in-out infinite;
}
@keyframes top-btn {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-.5em);
  }
  100% {
    transform: translateY(0);
  }
}


.go-to-top-button  {
  width: 2em;
  height: auto;
  aspect-ratio: 1 / 2;
  background: url(images/ilst_footer_01.png) no-repeat center / contain;
}
.fa.fa-angle-double-up {
  display: none !important;
}

.sec05_l-train .train_f_sen {
  height: calc(100% + 25em);
}

.l-train.sec01_l-train .train_f_sen {
  bottom: 0;
  top: auto;
  transform: translate(0 , 10em);
  height: 60em;
}



/* ボタン */

.btn-1 {
  position: relative;
  width: 12em;
  margin: 0 auto;
  padding: .5em 0;
  border-radius: 50vw;
  border: .16em solid #33C5FF;
  text-align: center;
  background: #fff url(images/arrow-1-b.webp) no-repeat 90% / .5em;
  transition: .2s ease-out all;
  transform: scale(1);
}
.btn-1:hover {
  transform: scale(1.1);
  background: #33C5FF url(images/arrow-1-w.webp) no-repeat 90% / .5em;

}

.btn-1 p {
  color: #00BAD3;
}
.btn-1:hover p {
  color: #fff;
}

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

a {
  transition: all .2s ease;

}

.btn-2 {
  position: relative;
  margin: 0 auto;
  width: 33em;
  padding: 2em 0;
  border-radius: 1.1em;
  background: #FFB327 url(images/arrow-1-w.webp) no-repeat 90% / 1em;
  transition: .15s ease-out all;
  transform: translateY(1em) scale(1);
  border: #fff .15em solid ;
}
.btn-2:hover {
  transform: translateY(1em) scale(1.05);
  background: #fff url(images/arrow-1-o.webp) no-repeat 90% / 1em;
  border: #FFB327 .15em solid ;
}

.sec03-wrap {
  pointer-events: auto;
  opacity: 0;
  transform: translateY(1em);
  transition: 1s ease all;
}
.sec03-wrap.active-2 {
  opacity: 1;
  transform: translateY(0);
}



.btn-2::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  width: calc(100% - 1.5em);
  height: calc(100% - 1.5em);
  border-radius: .8em;
  border: #fff 3px dashed;
  transition: .15s ease-out all;
}
.btn-2:hover::after {
   border: #FFB327 3px dashed;
}

.btn-2 p {
  font-size: 1.6em;
  font-weight: 700;
  color: #fff;
  transition: .15s ease-out all;
}
.btn-2:hover p {
  color: #FFB327;
}

/* ------------------------------------------------------- ヘッダー ------------------------------------------------------- */


#header-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  border-radius: 0 0 2.7rem 2.7rem;
}


#header-container .wrap {
  width: 98%;
  max-width: 1920px;
  padding-bottom: .3em;
}

.header {
  font-size: min(1.36vw , 18px);
}

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

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

.header-in {
  position: relative;
}

.navi-in {
  display: none;
}


/* ヘッダーロゴ */

.header-container-in.hlt-top-menu .logo-header {
  max-height: initial;
}

.logo {
  width: 22%;
  max-width: 12em;
}

.logo-image a {
  opacity: 1;
  transition: .2s ease all;
}
.logo-image a:hover {
  opacity: .6;
}

.site-name {
  aspect-ratio: 5 / 2;
  padding: 0;
}

span.site-name-text {
  display: block;
  height: 100%;
}

.header-container-in.hlt-top-menu .logo-header img {
  height: 100%;
  max-height: initial;
}

.header-2 {
  width: 14em;
}


.hamburger {
  display: none;
}

/* ヘッダーメニュー */

.header-nav ul {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-size: clamp(10px , 1.27vw , 18px);
  margin: 0 auto;
}

.header-nav li {
  position: relative;
  line-height: 1;
  border-right: 1px #522519 solid;
}

.header-nav li:last-of-type {
  border-right: 0;
}

@media screen and (min-width: 1640px){
  .header-nav li a .h_br {
    display: none;
  }

}



.header-nav li a {
  position: relative;
  align-items: baseline;
  display: inline-block;
  align-content: center;
  height: 2.5em;
  line-height: 1.2;
  padding: 0 .5em 0 2em;
  opacity: 1;
  transition: .2s ease all;
}
.header-nav li a::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.2em;
  height: auto;
  aspect-ratio: 1 / 1;
  transform: translate(40% , -50%);
}

.header-nav li a:hover {
  opacity: .6;
}

.header-nav li a span {
  display: inline-block;
}


.header-nav li:nth-child(1) a::before {
  background: url(images/header-nav-1.webp) no-repeat center / contain;
}
.header-nav li:nth-child(2) a::before {
  background: url(images/header-nav-5.webp) no-repeat center / contain;
}
.header-nav li:nth-child(3) a::before {
  background: url(images/header-nav-2.webp) no-repeat center / contain;
}
.header-nav li:nth-child(4) a::before {
  background: url(images/header-nav-3.webp) no-repeat center / contain;
}
.header-nav li:nth-child(5) a::before {
  background: url(images/header-nav-6.webp) no-repeat center / contain;
}
.header-nav li:nth-child(6) a::before {
  background: url(images/header-nav-4.webp) no-repeat center / contain;
}
.header-nav li:nth-child(7) a::before {
  background: url(images/header-nav-7.webp) no-repeat center / contain;
}

.header-nav a {
  color: #522519;
  font-weight: 700;
}

.header-flex {
  position: relative;
  width: calc(100% - 17vw);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-nav {
  display: block;
  width: auto;
}


.header-sp {
  display: none;
}

/* キッズクラブ */
.club {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(0 , -1em);
  height: auto;
  width: 16.5vw;
  max-width: 250px;
  aspect-ratio: 5 / 3;
  transition: .2s ease-in-out all;
}
.club:hover {
  transform: translate(0 , 0em);
}

.club_in {
  position: relative;
  width: 100%;
  height: 100%;
}

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

.club_in img {
  width: 100%;
  object-fit: contain;
}




/* ------------------------------------------------------- フッター ------------------------------------ ------------------- */

#footer {

  font-size: min(1.36vw , 18px);
  margin: 0 auto;
  padding: 8em 0 0 0;
}


#footer .wrap {
  max-width: initial;
}

/* 関連バナー */

#footer .banner {
  position: relative;
  width: 80%;
  max-width: 1020px;
  margin: 0 auto 4em auto;
}

#footer .banner .flex li {
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  width: calc(100% / 3 - 1.35em);
  height: auto;
  aspect-ratio: 10 / 3;
  border-radius: .5em;
  border: 1.5px solid #33C5FF;
  padding: 0 1em;
  opacity: 1;
  transition: .2s ease all;
}
#footer .banner .flex li:hover {
  opacity: .6;
}

#footer .banner .flex li a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


#footer .banner .flex li img {
  object-fit: contain;
  width: 100%;
  height: 85%;
}


#footer .banner .flex li.arrow-w::after {
  background: url(images/arrow-1-w.webp) no-repeat center / contain;
}
#footer .banner .flex li.arrow-w {
  padding: 0;
}
#footer .banner .flex li.arrow-w img {
  width: 100%;
  height: 103%;
  object-fit: cover;
}

/* SNSなど */
.footer-logo {
  justify-content: space-between;
  align-items: center;
}


.footer_wrap {
  width: 100%;
  padding: 3em 0 1.5em 0;
  background: #33C5FF;
}

.footer-wrap-in {
  display: grid;
  justify-items: center;
  width: 70%;
  max-width: 700px;
  margin: 0 auto;
}

.footer_sitelogo_w {
  width: auto;
  height: 6em;
  aspect-ratio: 10 / 1;
  margin-bottom: 1.6em;
}
.footer_sitelogo_w a {
  display: block;
  width: 100%;
  height: 100%;
}
.footer_sitelogo_w img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


#footer .sns {
  width: auto;
}

#footer .sns .flex {
  gap: 1em;
  height: 2.2em;
}

#footer .sns li {
  height: 100%;
}

#footer .sns li img {
  width: auto;
  height: 100%;
}

#footer .seibu-logo {
  width: 50%;
}
#footer .seibu-logo .flex {
  gap: 1.5em;
}
#footer .seibu-logo li {
  width: calc(100% / 2 - .75em);
}

#footer a {
  display: block;
  width: 100%;
  height: 100%;
}

.copyright {
  color: #fff;
}


/* ------------------------------------------------------- body ------------------------------------------------------- */

.content-in {
  display: block;
  width: 100%;
}

.main {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0;
}

.content {
  margin-top: 0;
  overflow: hidden;
}

.home.no-sidebar .content .main{
  margin-top: min(2vw,27px);
}


.page-id-12 .content,
.page-id-10 .content,
.page-id-14 .content {
  overflow: initial;
}


/* ------------------------------------------------------- TOPページ 共通 ------------------------------------------------------- */

.hidden_h1 {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  visibility: hidden;
}

.sec h2 {
  font-size: 2.8em;
  font-family: "ab-tombo-bold", sans-serif;
}

p.note {
  font-size: clamp(12px , 1.5vw , 14px);
}

.pc {
  display: block;
}

.flex.pc {
  display: flex;
}

.sp {
  display: none;
}

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

.fv {
  z-index: 2;
  position: relative;
  width: 100vw;
  height: auto;
  margin-left: calc(50% - 50vw);
  aspect-ratio: 16 / 9;
  pointer-events: none;
}

.fv_in {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* fvスライダー */

.fv_slider {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}

#fv .splide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#slider1 .splide__track {
  pointer-events: auto;
  position: absolute;
  overflow: initial;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%) translateZ(0);
  width: 180vw;
  height: auto;
}

.splide__list {
  pointer-events: auto;
}

@media screen and (min-width: 1980px){
  #slider1 .splide__track {
    width: 150vw;
  }
}

#fv .splide__slide {
  width: auto;
  height: 100%;
  aspect-ratio: 16 / 9;
}

#fv .splide__slide a {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(0.7);
}
#fv .splide__slide.is-active a {
  transform: scale(1);
}


#slider1 .splide__slide .slide_inner {
  overflow: hidden;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  transition: transform 0.5s ease, opacity 0.5s ease;
  width: auto;
  height: 100%;
  background: url(images/banner-sample.png) no-repeat center / cover;
  border-radius: 2.7em;
  border: .7em solid #33C5FF;
  box-sizing: content-box;
  aspect-ratio: 16 / 9;
}

#slider1 .splide__slide.is-active .slide_inner {
  border: .7em solid #33C5FF;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

#fv .splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* fvスライダー2 */

.fv_slider2 {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  margin-bottom: 0;
  opacity: 0;
  transition: linear 0.5s;
  position: absolute;
  top: 0;
  left: 0;
}

.fv_slider2.is-ready{
  opacity: 1;
}

/* #fv .splide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
} */

.fv_slider2 .slick-list {
  pointer-events: auto;
  position: absolute;
  overflow: initial;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%) translateZ(0);
  width: 180vw;
  height: auto;
}

/* .splide__list {
  pointer-events: auto;
} */

@media screen and (min-width: 1980px){
  .fv_slider2 .slick-list {
    width: 150vw;
  }
}

#fv .slick__slide{
  width: auto;
  height: 100%;
  aspect-ratio: 16 / 9;
}

#fv .slick__slide a {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(0.7);
  transition: ease 0.8s;
  /* opacity: 0; */
}

#fv .slick__slide.slick-active.slick-center a {
  transform: scale(1);
  /* opacity: 1; */
}

.fv_slider2 .slick__slide .slide_inner {
  overflow: hidden;
  position: relative;
  /* top: 50%;
  left: 50%;
  transform: translate(-50% , -50%); */
  transition: transform 0.5s ease, opacity 0.5s ease;
  width: auto;
  height: 100%;
  background: url(images/banner-sample.png) no-repeat center / cover;
  border-radius: 2.7em;
  border: .7em solid #33C5FF;
  box-sizing: content-box;
  aspect-ratio: 16 / 9;
}


.fv_slider2 .slick__slide.slick-active.slick-center .slide_inner {
  border: .7em solid #33C5FF;
  /* z-index: 2; */
  display: flex;
  flex-direction: column;
}

#fv .slick__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv_slider2 .slick-arrow{
  position: absolute;
  top: 50%;
  left: 50%;
  /* transform: translate(21vw , 14vw); */
  background: #33C5FF;
  font-size: min(5.8vw , 72px);
  width: 1em;
  /* max-width: 72px; */
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  pointer-events: auto;
  z-index: 2;
}

.fv_slider2 .slick-arrow.slick-prev{
  background: #33C5FF url(images/arrow-4-w1.webp) no-repeat center / 35%;
  transform: translate(21vw , 14.5vw);
}

.fv_slider2 .slick-arrow.slick-next{
  background: #33C5FF url(images/arrow-4-w2.webp) no-repeat center / 35%;
  transform: translate(calc(21vw + 1.25em) , 14.5vw);
}

.fv_slider2 .slick-arrow.slick-prev:before,
.fv_slider2 .slick-arrow.slick-next:before{
  content: none;
}

.fv_slider2 .slick-dots{
  /* background: #ccc; */
  position: absolute;
  top: 50%;
  left: 0;
  bottom: auto;
  height: auto;
  padding: 0 20%;
  transform: translateY(18vw);
  display: flex;
  justify-content: flex-start;
}

.slick-dots li{
  width: 20px;
  height: 20px;
  margin: 0;
}

.slick-dots li button{
  width: 100%;
  height: 100%;
}

.slick-dots li button:before{
  background-color: #522519;
  border-radius: 50%;
  opacity: 0.4;
  width: 100%;
  height: 100%;
  transform: scale(0.5);
}

.slick-dots li.slick-active button:before{
  transform: scale(0.8);
}


@media screen and (min-width: 1980px){
  .fv_slider2 .slick-arrow.slick-prev{
    transform: translate(17vw , 12.5vw);
  }

  .fv_slider2 .slick-arrow.slick-next{
    transform: translate(calc(17vw + 1.25em) , 12.5vw);
  }

  .fv_slider2 .slick-dots{
    padding: 0 25%;
    transform: translateY(15vw);
  }
}

@media screen and (max-width: 834px){
    .fv_slider2 .slick-dots{
      display: flex!important;
    }
}

@media screen and (max-width: 768px){
  .fv_slider2 .slick-list{
    width: 100%;
  }

  #fv .slick__slide a{
    transform: scale(0.85);
  }

  #fv .slick__slide.slick-active.slick-center a {
    transform: scale(0.85);
  }

  .fv_slider2 .slick__slide.slick-active.slick-center .slide_inner{
    border: 1.5vw solid #33C5FF;
    /* border-radius: 2vw; */
  }

  .fv_slider2 .slick__slide .slide_inner{
    border: 1.5vw solid #33C5FF;
    border-radius: 1.2em;
  }

  .fv_slider2 .slick-arrow{
    font-size: min(9vw , 72px);
  }

  .fv_slider2 .slick-arrow.slick-prev{
    background: #33C5FF url(images/arrow-4-w1.webp) no-repeat center / 35%;
    transform: translate(-45vw , 24.5vw);
  }

  .fv_slider2 .slick-arrow.slick-next{
    background: #33C5FF url(images/arrow-4-w2.webp) no-repeat center / 35%;
    transform: translate(calc(-45vw + 1.25em) , 24.5vw);
  }


  .fv_slider2 .slick-dots{
    padding: 0 27%;
    transform: translateY(28vw);
    justify-content: center;
  }

  .slick-dots li{
    width: 3.125vw;
    height: 3.125vw;
    max-width: 20px;
    max-height: 20px;
    margin: 0;
  }

}


/* 矢印 */

#fv .splide__arrows {
  pointer-events: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  transform: translate(21vw , 14vw);
  width: 9em;
  height: auto;
  aspect-ratio: 9 / 4;
}


#fv .splide__arrow {
  opacity: 1;
  background: #33C5FF url(images/arrow-4-w2.webp) no-repeat center / 30%;
  width: 4em;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transition: .2s ease all;
}
#fv .splide__arrow.splide__arrow--prev:hover,
#fv .splide__arrow.splide__arrow--next:hover {
  transform: translate(0 , 0) scale(1.1);
 }

#fv .splide__arrow.splide__arrow--prev {
  left: 0;
  /* right: 0; */
  top: auto;
  bottom: 0;
  transform: translate(0 , 0);
  background: #33C5FF url(images/arrow-4-w1.webp) no-repeat center / 30%;
}
#fv .splide__arrow.splide__arrow--next {
  right: 0;
  top: auto;
  bottom: 0;
  transform: translate(0 , 0);
}

#fv .slide_img {
  width: 100%;
  height: 100%;
}

#fv .top_banner_text .slide_img {
  height: 90%;
  aspect-ratio: 2 / 1;
}


.top_banner_text .slide_text {
  height: 10%;
  display: flex;
  gap: 2em;
  padding: 0 1em;
  align-items: center;
  background-color: #fff;
}
.top_banner_text .slide_text p {
  color: #522519;
  font-weight: 700;
  font-size: min(1.5vw , 1em);
  width: 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top_banner_text .slide_text p.slide_date {
  opacity: .5;
  font-size: min(1.2vw , .8em);
  width: auto;
}

.splide__arrow svg {
  display: none;
}

/* ページネーション */

.fv .splide__pagination {
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -43%);
  padding: 0;
  justify-content: flex-start;
  align-items: end;
  gap: .3em;
  width: 60vw;
  aspect-ratio: 16 / 9;
}

.splide__pagination li {
  pointer-events: auto;
}

.fv .splide__pagination__page {
  background-color: #522519;
  opacity: .5;
}
.fv .splide__pagination__page.is-active {
  opacity: 1;
  transform: scale(2);
}

@media screen and (min-width: 1980px){
  #fv .splide__arrows {
    transform: translate(16vw, 13vw);
  }
  .fv .splide__pagination {
    width: 50vw;
  }

}

.hidden{
  pointer-events: none;
}

.fv_bg {
  position: absolute;
  z-index: -3;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: auto;
  aspect-ratio: 16 / 9;
  background-color: #fff;
}


/* 線路 */
.fv_sen {
  position: absolute;
  z-index: -1;
  top: max(-2vw,-27px);
  left: 50%;
  transform: translate(-50% , 0);
  width: 100vw;
  height: auto;
  min-height: calc(12em + 33.75vw);
  aspect-ratio: 16 / 9;
  font-size: clamp(15px , 1.36vw , 18px);
}

.fv_se-in {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}



.sen-in {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 68%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  font-size: clamp(15px , 1.36vw , 18px);

}
@media screen and (min-width: 1980px){
   .sen-in {
    width: 55vw;
   }
}

.route-svg {
  pointer-events: none;
  overflow: initial;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0 , -55%);
  width: 100%;
}

#sen2_svg {
  display: block;
}
#sen2_svg_sp {
  display: none;
}

.rail-base {
  fill: none;
  stroke: #cfecf6;
  stroke-width: 60;
}

.rail-outline {
  fill: none;
  stroke: #fff;
  stroke-width: 50;
}

.rail-dash {
  fill: none;
  stroke: #cfecf6;
  stroke-width: 80;
  stroke-dasharray: 6 50;
}

#route-path {
  position: relative;
  display: block;
  transform: translateY(-5em);
}


#route-path2 {
  display: none;
}


#route-path .r-cls-1 {
  stroke-width: 1.8rem;
}

#route-path .r-cls-2 {
  stroke-width: 1.3rem;
}
#route-path .r-cls-3 {
  stroke-width: 2.5rem;
  stroke-dasharray: .25rem 2rem;
}

/* 電車 */

.fv_sen .train {
  width: min(20vw , 7em);
  transform-box: fill-box;
  transform-origin: center;
}



/* 線路2 */
.fv_sen2 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50% , 0);
  z-index: -2;
  width: 100vw;
  height: auto;
  aspect-ratio: 16 / 9;
  font-size: clamp(15px , 1.36vw , 18px);

}


.fv_sen2 .sen-in {
  position: relative;
  width: 100%;
}

.fv_sen2 .cls-1 {
  stroke-width: 1.8rem;
}

.fv_sen2 .cls-1, .fv_sen2 .cls-2, .fv_sen2 .cls-3 {
  fill: none;
  stroke-miterlimit: 10;
}

.fv_sen2 .cls-1, .cls-3 {
  stroke: #fadbbb;
}

.fv_sen2 .cls-2 {
  stroke: #fff;
  stroke-width: 1.3rem;
}

.fv_sen2 .cls-3 {
  stroke-width: 2.5rem;
  stroke-dasharray: .25rem 2rem;
}

.fv_sen2 .cls-1,
.fv_sen2 .cls-2,
.fv_sen2 .cls-3 {
  vector-effect: none;
}
@media screen and (min-width: 1980px){
  .fv_sen2 .cls-1,
  .fv_sen2 .cls-2,
  .fv_sen2 .cls-3 {
    vector-effect: non-scaling-stroke;
  }
  .fv{
    aspect-ratio: 16 / 8;
  }

  .fv_bg{
    aspect-ratio: 16 / 8;
  }

  .fv_sen{
    aspect-ratio: 16 / 8;
  }

  .fv_sen2{
    aspect-ratio: 16 / 8;
  }

  .l-train{
    margin-top: -3vw;
  }
}


/* 背景イラスト */

.illust-wrap {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50% , 0);
  width: 100%;
  max-width: 1600px;
  height: 100%;
}

.illust_in {
  position: relative;
  width: 100%;
  height: 100%;

}
.illust_in img {
  position: absolute;
  height: auto;
  object-fit: contain;
}

.fv_illust_1,
.fv_illust_2 {
  top: 50%;
  transform: translate(-50% , -50%);
  width: 60%;
  height: auto;
  max-width: initial;
  aspect-ratio: 16 / 9;
}

@media screen and (min-width: 1980px){
   .fv_illust_1,
   .fv_illust_2 {
    width: 50%;
   }
}

.fv_illust_1 .i-item1 {
  top: 50%;
  left: 0;
  transform: translate(-4em , -100%);
  width: 5em;
}

.fv_illust_1 .i-item2 {
  bottom: 0;
  right: 0;
  transform: translate(7em , -5em);
  width: 2em;
}

.fv_illust_1 .i-item3 {
  top: 0;
  right: 0;
  transform: translate(14em , 0em);
  width: 2em;
}
.fv_illust_1 .i-item4 {
  top: 0;
  right: 0;
  transform: translate(11.8em , 0em);
  width: 2em;
}
.fv_illust_1 .i-item5 {
  top: 0;
  right: 0;
  transform: translate(9.6em , 0em);
  width: 2em;
}
.fv_illust_1 .i-item6 {
  bottom: 0;
  right: 0;
  transform: translate(8em , -1em);
  width: 1.8em;
}
.fv_illust_1 .i-item7 {
  top: 50%;
  left: 0;
  transform: translate(-4em , -8em);
  width: 1.8em;
}
.fv_illust_1 .i-item8 {
  top: 50%;
  left: 0;
  transform: translate(-6.5em , -9em);
  width: 2.2em;
}

.fv_illust_1 .i-item9 {
  bottom: 0;
  left: 0;
  transform: translate(-6.5em , -10em);
  width: 1.8em;
}
.fv_illust_1 .i-item10 {
  bottom: 0;
  left: 0;
  transform: translate(-4.5em , -10em);
  width: 1.4em;
}



.illust-wrap.fv_illust_2 {
  z-index: 3;
  max-height: 590px;
}
@media screen and (min-width: 1980px){
  .illust-wrap.fv_illust_2 {
    max-height: 25vw;
  }
}

.load .fv_illust_2 .i-item1 {
  opacity: 1;
  transform: translate(13em , 3em);
}

.fv_illust_2 .i-item1 {
  opacity: 0;
  top: 0;
  right: 0;
  transform: translate(15em , 3em);
  width: 7em;
  transition: 1s ease all;
}

.load .fv_illust_2 .i-item2 {
  opacity: 1;
  transform: translate(85%, 73%);
}

.fv_illust_2 .i-item2 {
  opacity: 0;
  bottom: 0;
  right: 0;
  transform: translate(150%, 73%);
  width: 45%;
  max-width: 20em;
  transition: 1s .4s ease all;
}

.load .fv_illust_2 .i-item3 {
  opacity: 1;
  transform: translate(-12em , 1em);
}
.fv_illust_2 .i-item3 {
  bottom: 0;
  left: 0;
  transform: translate(-12em , 2em);
  width: 12em;
  opacity: 0;
  transition: 1s .2s ease all;
}






/* ------------------------------------------------------- TOPページ お出かけTOPIC ------------------------------------------------------- */


#topic {
  position: relative;
  width: 100%;
  min-height: 30em;
  font-size: min(1.36vw , 18px);

}

.topic_box {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

#sec01,
#sec02 {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  font-size: min(1.36vw , 18px);
}

#sec01 {
  z-index: 3;
}

#sec02 {
  z-index: 2;
}


#sec01 .sec_in,
#sec02 .sec_in {
  position: relative;
  transform: translateY(1.5em);
  width: 90%;
  max-width: 1920px;
  margin: 0 auto;
}

#sec01.sec h2,
#sec02.sec h2 {
  color: #fff;
}

#sec01 .flex {
  gap: 0;
}

/* 左 */
#sec01 .flex_cnt.text,
#sec02 .flex_cnt.text {
  position: relative;
  width: 31%;
  max-width: 21em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1em;
}


#sec01 .flex_cnt.text::after,
#sec02 .flex_cnt.text::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  background: #33C5FF url(images/top-topic_bg.webp) no-repeat center / contain;
  width: 50em;
  width: max(40vw , 50em);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50vw;
}
#sec01 .flex_cnt.text p,
#sec02 .flex_cnt.text p {
  color: #fff;
  font-weight: 700;
  opacity: 0;
  transform: translateY(1em);
  transition: 1s ease all;
}
#sec01 .active .flex_cnt.text p,
#sec02 .active .flex_cnt.text p {
  opacity: 1;
  transform: translateY(0);
}

.flex_cnt .illust {
  position: relative;
  z-index: 6;
  width: 10em;
  height: auto;
}
#sec01 .flex_cnt .illust img {
  transform: translateX(-50%) scaleX(-1);
  opacity: 0;
  transition: .5s ease all;
}
#sec01 .active .flex_cnt .illust img {
  opacity: 1;
  transform: translateX(0) scaleX(-1);
}

#sec01 .btn-w,
#sec02 .btn-w {
  opacity: 0;
  transition: 1s ease all;
  transform: translateY(1em);
}
#sec01 .btn-w.active-2 ,
#sec02 .btn-w.active-2 {
  opacity: 1;
  transform: translateY(0);
}

#sec01 .btn-1,
#sec02 .btn-1 {
  margin: 0;
  background: #fff url(images/arrow-1-b.webp) no-repeat 90% / .5em;
  border: .2em solid #fff;
  transition: .2s ease-out all;
  transform: scale(1);
}
#sec01 .btn-1:hover {
  background: #33C5FF url(images/arrow-1-w.webp) no-repeat 90% / .5em;
  border: .2em solid #fff;
  transform: scale(1.1);
}
#sec02 .btn-1:hover {
  background: #FFB327 url(images/arrow-1-w.webp) no-repeat 90% / .5em;
  border: .2em solid #fff;
  transform: scale(1.1);
}

#sec01 .flex_cnt.text .btn-1 p{
  color: #33C5FF;
  transition: .2s ease all;
}
#sec01 .flex_cnt.text .btn-1:hover p{
  color: #fff;
}

#sec02 .flex_cnt.text .btn-1 p {
  color: #FFB327;
}
#sec02 .flex_cnt.text .btn-1:hover p{
  color: #fff;
}

#sec02 .btn-1 {
  background: #fff url(images/arrow-1-o.webp) no-repeat 90% / .5em;
}

/* 右 */
#sec01 .active .flex_cnt.top_post,
#sec02 .active .flex_cnt.top_post {
  opacity: 1;
  transform: translateY(0);

}

#sec01 .flex_cnt.top_post,
#sec02 .flex_cnt.top_post {
  position: relative;
  width: 69%;
  z-index: 5;
  opacity: 0;
  transform: translateY(1em);
  transition: 1s ease all;
}


.post-box {
  aspect-ratio: 10 / 9;
  width: 25vw;
  width: calc(25vw + .7em);
  opacity: .5;
}
@media screen and (min-width: 1980px){
  .post-box {
    width: calc(18.5vw + .7em);
  }
}

#sec01 .flex_cnt.top_post .splide {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0 , 0);
  width: 100vw;
}

#sec01 .flex_cnt.top_post .splide__slide,
#sec02 .flex_cnt.top_post .splide__slide {
  width: auto;
  height: 100%;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 1.1em;
  background-color: #fff;
  margin: 0 1em;
}



#sec01 .flex_cnt.top_post .splide__slide img,
#sec02 .flex_cnt.top_post .splide__slide img {
  transform: scale(1);
  transition: .2s ease all;
}

#sec01 .flex_cnt.top_post .splide__slide:hover img ,
#sec02 .flex_cnt.top_post .splide__slide:hover img {
  transform: scale(1.1);
}

#sec01 .splide__track--draggable,
#sec02 .splide__track--draggable {
  padding-bottom: 1em;
}



.post-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#sec01 .post-title ,
#sec02 .post-title {
  font-size: max(1.2vw , 1em);
  line-height: 1.5;
}



#sec01 .splide__arrows,
#sec02 .splide__arrows {
  position: absolute;
  width: 8em;
  height: 3.5em;
  left: 0;
  z-index: 2;
  bottom: 0;
  transform: translate(-1.5em , 3.5em);
}

#sec02 .splide__arrows {
  left: auto;
  right: 0;
  transform: translate(1.5em , 3.5em);
}


#sec01 .splide__arrow ,
#sec02 .splide__arrow,
#sec04 .splide__arrow,
#sec04 .splide__arrow.splide__arrow--next
{
  background: #fff url(images/arrow-4-b2.webp) no-repeat center / 35%;
  width: 3.5em;
  height: auto;
  opacity: 1;
  aspect-ratio: 1 / 1;
  transition: .2s ease all;
  transform: translateY(-50%) scale(1);
}
#sec01 .splide__arrow:hover ,
#sec02 .splide__arrow:hover,
#sec04 .splide__arrow:hover,
#sec04 .splide__arrow.splide__arrow--next:hover {
  transform: translateY(-50%) scale(1.1);
}

#sec02 .splide__arrow {
  background: #fff url(images/arrow-4-o2.webp) no-repeat center / 35%;
}

#sec01 .splide__arrow.splide__arrow--prev ,
#sec02 .splide__arrow.splide__arrow--next,
#sec04 .splide__arrow.splide__arrow--prev {
  left: 0;
  background: #fff url(images/arrow-4-b1.webp) no-repeat center / 35%;
}
#sec02 .splide__arrow.splide__arrow--next{
  background: #fff url(images/arrow-4-o1.webp) no-repeat center / 35%;
}

#sec01 .splide__arrow.splide__arrow--next,
#sec02 .splide__arrow.splide__arrow--prev,
#sec04 .splide__arrow.splide__arrow--next{
  right: 0;
  left: auto;
}


/* ページネーション */
.splide__pagination__page {
  transition: .2s ease all;
  transform: scale(1);
}
.splide__pagination__page:hover {
  transform: scale(1.4);
}

#sec01 .splide__pagination {
    top: auto;
    bottom: .5em;
    left: 0;
    transform: translate(0 , 2em);
    padding: 0 1em;
    position: absolute;
    right: 0;
    z-index: 1;
    width: 70vw;
    gap: .3em;
}

#sec01 .splide__pagination__page {
  opacity: .7;
  background-color: #33C5FF;

}
#sec02 .splide__pagination__page {
  opacity: .7;
  background-color: #FFB327;
}

#sec01 .splide__pagination__page.is-active,
#sec02 .splide__pagination__page.is-active {
  opacity: 1;
}

#sec02 .splide__pagination {
  top: auto;
    bottom: .5em;
    left: auto;
    right: 0;
    transform: translate(0 , 2em);
    padding: 0 1em;
    position: absolute;
    right: 0;
    z-index: 1;
    width: 70vw;
    gap: .3em;
}

/* イラスト */

.illust-flex {
  display: flex;
  gap: .2em;
  flex-wrap: wrap;
}

.illust-wrap.topic_illust_1,
.illust-wrap.sec02_illust {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(40vw, 50em);
  height: auto;
  aspect-ratio: 1 / 1;
  z-index: 5;
}

.topic_illust_1 .i-item1 {
  top: 50%;
  left: 0;
  transform: translate(10em , -1.8em);
  width: 1.3em;
}
.topic_illust_1 .i-item2 {
  top: 50%;
  left: 0;
  transform: translate(7.5em , -2.5em);
  width: 1.8em;
}
.topic_illust_1 .i-item3 {
  bottom: 50%;
  right: 0;
  transform: translate(-18em , 14em);
  width: 7.8em;
}
.topic_illust_1 .i-item4 {
  bottom: 0;
  right: 0;
  transform: translate(-12em , -2vw);
  width: 1.6em;
}
.topic_illust_1 .i-item5 {
  bottom: 0;
  right: 0;
  transform: translate(-16em , 1em);
  width: 4.8em;
}
.topic_illust_1 .i-item6 {
  bottom: 0;
  right: 50%;
  transform: translate(0 , -3em);
  width: 4.2em;
}

.topic_illust_1 .illust-flex.i-item7 {
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translate(11em , -6em);
  width: 5.5em;
  height: auto;
  aspect-ratio: 10 / 3;
}
.topic_illust_1 .illust_in .i-item7 img {
  position: initial;
  width: calc(100%  / 3 - .15em);
}


/* ------------------------------------------------------- TOPページ 新着記事 ------------------------------------------------------- */
#sec02 {
  padding: 10em 0 8em 0;
}

#sec02 .flex {
  flex-direction: row-reverse;
  gap: 0;
}

#sec02 .flex_cnt.text::after {
  background: #FFB327 url(images/top-article_bg.webp) no-repeat center / contain;
}

#sec02.sec.active h2 {
  opacity: 1;
  transform: translateY(0);
}
#sec02.sec h2 {
  text-align: right;
  letter-spacing: .2em;
  opacity: 0;
  transform: translateY(1em);
  transition: 1s ease all;
}

#sec02 .flex_cnt.text {
  align-items: end;
}

#sec02 .flex_cnt.top_post .splide {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(0 , 0);
  width: 100vw;
}

#sec02 .post-category {
  margin-right: auto;
}


#sec02 .illust {
  position: relative;
  width: 10em;
  aspect-ratio: 9 / 10;
}
#sec02 .illust img {
  position: absolute;
  height: auto;
  object-fit: contain;
}
/* イラスト1 */
#sec02 .illust .i-item1 {
  top: 50%;
  left: 0;
  transform: translate(-1em , 4em);
  width: 1.4em;
}
#sec02 .illust .i-item2 {
  bottom: 0;
  right: 0;
  transform: translate(0 , 6em);
  width: 1.2em;
}
#sec02 .illust .i-item3 {
  bottom: 0;
  right: 0;
  transform: translate(-2em, 6em);
  width: 1.8em;
}
#sec02 .illust .i-item4 {
  top: 50%;
  left: 0;
  transform: translate(1em, 3em);
  width: 5em;
}
#sec02 .illust .i-item5 {
  top: 0;
  right: 0;
  transform: translate(0, 0);
  width: 2em;
}
#sec02 .illust .i-item6 {
  top: 0;
  right: 0;
  transform: translate(3em, 3em);
  width: 10em;
}

/* イラスト2 */
.active .sec02_illust .i-item1 {
  transform: translate(4em , 0);
  opacity: 1;
}

.sec02_illust .i-item1 {
  top: 0;
  left: 0;
  transform: translate(6em , 0);
  width: 17em;
  opacity: 0;
  transition: .5s ease-in-out all;
}
.sec02_illust .i-item2 {
  top: 0;
  left: 50%;
  transform: translate(30% , -3.5em) rotate(2deg);
  width: 2.3em;
  opacity: 0;
  transition: 1s ease-in-out all;
}

.active .sec02_illust .i-item2 {
  opacity: 1;
  transform: translate(0 , -5em) rotate(0);
}
.sec02_illust .i-item3 {
  top: 0;
  left: 50%;
  transform: translate(-.5em , -1em);
  width: 3em;
}
.sec02_illust .i-item4 {
  top: 0;
  left: 50%;
  transform: translate(4em , -1.8em);
  width: 2.2em;
}
.sec02_illust .i-item5 {
  top: 0;
  left: 50%;
  transform: translate(6.5em , -1.1em);
  width: 2.2em;
}












/* ------------------------------------------------------- TOPページ キッズクラブ ------------------------------------------------------- */



#sec03 {
  pointer-events: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  overflow: hidden;
}

#sec03 .sec_in {
  position: relative;
  z-index: 2;
}

.sec .title {
  position: relative;
}

.sec .title h2 {
  padding: 3em 0 1.6em 0;
  line-height: 1.5;
  letter-spacing: .1em;
  font-size: 2.2em;
  color: #fff;
  opacity: 0;
  transform: translateX(-10%);
  transition: 1s ease all;
}
.sec .active .title h2 {
  opacity: 1;
  transform: translateY(0);
}

/* 波 */
.sec .title .bg_1,
#sec07 .map .bg_1 {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  transform: translate(-50% , 0);
  width: 100vw;
  height: 100%;
  background-color: #33C5FF;

    /* マスク */
  -webkit-mask-image: url(images/top-kids-t1.webp);
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-position: top center;
  -webkit-mask-size: min(1694px, 130vw) auto;

  mask-image: url(images/top-kids-t1.webp);
  mask-repeat: repeat-x;
  mask-position: top center;
  mask-size: min(1694px, 130vw) auto;

}


@media screen and (max-width: 1964px){
  .sec .title span.bg_1 {
    -webkit-mask-position: top left;
    -webkit-mask-size: min(1964px, 135vw) auto;

    mask-position: top left;
    mask-size: min(1964px, 135vw) auto;

  }
}

#sec03 .bg_2 {
  z-index: -2;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50% , 3.8em);
  width: 100vw;
  max-width: min(1080px , 100vw);

}
.sec .title .bg_2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50% , 100%);
  background-color: #33C5FF;
  width: 100vw;
  height: 10vw;

}



#sec03 .bg_2 .bg_in {
  position: relative;
  width: 60%;
  max-width: 860px;
  height: auto;
  aspect-ratio: 10 / 2.8;
  margin-left: auto;
}
#sec03 .bg_in img {
  position: absolute;
  height: auto;
}


#sec03 .bg_in img.bg_2_1 {
  width: 100%;
  aspect-ratio: 5 / 1;
  opacity: 0;
  transform: translateY(1em) rotate(-5deg);
  transition: 1s .2s ease all;
}
#sec03 .active .bg_in img.bg_2_1 {
  transform: translateY(0) rotate(0);
  opacity: 1;
}

#sec03 .bg_in img.bg_2_2 {
  bottom: 0;
  right: 0;
  transform: translate(0 , 50%) rotate(10deg);
  width: 55%;
  aspect-ratio: 2 / 1;
  opacity: 0;
  transition: .9s .3s ease all;
}
#sec03 .active .bg_in img.bg_2_2 {
  transform: translate(0 , 10%) rotate(0);
  opacity: 1;
}

/* キッズクラブについて */

#sec03 .kids_cnt {
  position: relative;
  text-align: center;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);

}

#sec03 .kids_cnt-in {
  position: relative;
  width: 90%;
  max-width: 1440px;
  margin: 0 auto;
  padding-top: 4em;
}


#sec03 .kids_cnt-in .bg {
  overflow: hidden;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  transform: translate(-50% , -4em);
  background-color: #fff;
  width: 250vw;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

#sec03 .kids_cnt .cnt-title {
  position: relative;
  margin-bottom: 2em;
}

#sec03 .kids_cnt .cnt-title_box {
  position: relative;
  width: 20.5em;
  height: auto;
  margin: 0 auto 1.6em auto;
}

#sec03 .kids_logo {
  width: 100%;
  object-fit: contain;
  opacity: 0;
  transition: 1s ease all;
  transform: translateY(1em);
}
#sec03 .active-2 .kids_logo {
  opacity: 1;
  transform: translateY(0);
}

#sec03 .subcatch {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(100% , 0) rotate(20deg);
  display: grid;
  align-content: center;
  width: 10em;
  height: auto;
  aspect-ratio: 1 / 1;
  background: url(images/subcatch.webp) no-repeat center / contain;
  opacity: 0;
  transition: .8s .4s ease all;
}
#sec03 .active-2 .subcatch {
  opacity: 1;
  transform: translate(100% , -20%) rotate(10deg);
}

#sec03 .subcatch p {
  line-height: 1.5;
  font-size: 1.3em;
  font-weight: 700;
  color: #fff;
}

#sec03 .kids_cnt .text {
  width: 31em;
  margin: 0 auto;
  font-weight: 700;
  color: #522519;
  opacity: 0;
  transform: translateY(1em);
  transition: 1s ease all;
}
#sec03 .kids_cnt .active-2  .text {
  opacity: 1;
  transform: translateY(0);
}

/* キッズクラブイラスト */


.sec03_illust img.i-item1 {
  top: 0;
  left: 50%;
  transform: translate(-6em , -1em);
  width: 20em;
  opacity: 0;
  transition: 1.2s ease all;
}
.active .sec03_illust img.i-item1 {
  opacity: 1;
  transform: translate(-6em , -3em);
}

.sec03_illust .i-item2 {
  top: 50%;
  left: 0;
  transform: translate(5em , -3em);
  width: .8em;
  opacity: 0;
  transition: .5s .5s ease-in-out all;
}
.active .sec03_illust .i-item2 {
  opacity: .5;
  transform: translate(4em , -4em);
}

.sec03_illust .i-item3 {
  top: 50%;
  left: 0;
  transform: translate(-4em , -2.5em) rotate(20deg);
  width: 2em;
  opacity: 0;
  transition: .5s .5s ease-in-out all;
}
.active .sec03_illust .i-item3 {
  opacity: .5;
  transform: translate(-6em , -4.5em) rotate(45deg);
}

.sec03_illust .i-item4 {
  top: 50%;
  left: 0;
  transform: translate(4em , -3.5em) rotate(0deg);
  width: .5em;
  opacity: 0;
  transition: .5s .5s ease-in-out all;
}
.active .sec03_illust .i-item4 {
  opacity: .5;
  transform: translate(2em , -4.5em) rotate(20deg);

}

.sec03_illust .i-item5 {
  top: 50%;
  left: 0;
  transform: translate(2em , -2em) rotate(-40deg);
  width: .8em;
  opacity: 0;
  transition: .5s .5s ease-in-out all;
}
.active .sec03_illust .i-item5 {
  opacity: .5;
  transform: translate(0 , -3em) rotate(-20deg);
}

.sec03_illust .i-item6 {
  top: 50%;
  left: 0;
  transform: translate(0em , -1em);
  width: .3em;
  opacity: 0;
  transition: .5s .5s ease-in-out all;
}
.active .sec03_illust .i-item6 {
  opacity: .5;
  transform: translate(-2em , -3em);
}


.sec03_illust .i-item7 {
  top: 0;
  left: 0;
  transform: translate(-6em , 4.5em) rotate(0deg);
  width: .55em;
  opacity: 0;
  transition: .5s .5s ease-in-out all;
}
.active .sec03_illust .i-item7 {
  opacity: .5;
  transform: translate(-9em , 3em) rotate(-20deg);
}

.sec03_illust .i-item8 {
  top: 0;
  left: 0;
  transform: translate(-7em , 10em);
  width: .55em;
  opacity: 0;
  transition: .5s .5s ease-in-out all;
}
.active .sec03_illust .i-item8  {
  opacity: .5;
  transform: translate(-8em , 8em);

}

.sec03_illust .i-item9 {
  top: 0;
  left: 0;
  transform: translate(-5em , 9.5em) rotate(-15deg);
  width: .55em;
  opacity: 0;
  transition: .5s .5s ease-in-out all;
}
.active .sec03_illust .i-item9 {
  opacity: .5;
  transform: translate(-6em , 8.5em) rotate(-20deg);
}


.sec03_illust .i-item10 {
  top: 0;
  left: 0;
  transform: translate(-5em , 12em) rotate(30deg);
  width: .8em;
  opacity: 0;
  transition: .5s .5s ease-in-out all;
}
.active .sec03_illust .i-item10 {
  opacity: .5;
  transform: translate(-7.5em , 12em) rotate(20deg);
}


/* タイトルイラスト */

.kids_illust {
  position: absolute;
  display: flex;
  justify-content: space-between;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 100%;
  max-width: 950px;
}
.kids_illust .illust_l ,
.kids_illust .illust_r {
  position: relative;
  width: 6em;
  height: 100%;
}
.kids_illust img {
  position: absolute;
  height: auto;
}

.kids_illust .i-item1 {
  bottom: 50%;
  right: 0;
  transform: translate(0em , 4em);
  width: 1.4em;
  opacity: 0;
  transition: .5s .5s ease all;
}
.active-2 .kids_illust .i-item1 {
  opacity: 1;
  transform: translate(-1em , 3em);
}

.kids_illust .i-item2 {
  bottom: 50%;
  right: 0;
  transform: translate(1em , 1em) rotate(25deg);
  width: 2em;
  opacity: 0;
  transition: .5s .5s ease all;
}
.active-2 .kids_illust .i-item2 {
  opacity: 1;
  transform: translate(0 , 0em) rotate(45deg);
}


.kids_illust .i-item3 {
  bottom: 50%;
  left: 0;
  transform: translate(1em , 2em) rotate(-40deg);
  width: 2em;
  opacity: 0;
  transition: .5s .6s ease all;
}
.active-2 .kids_illust .i-item3 {
  opacity: 1;
  transform: translate(0 , 1em) rotate(-20deg);
}

.kids_illust .i-item4 {
  bottom: 50%;
  left: 0;
  transform: translate(2em, -1.5em) rotate(-40deg);
  width: 1.5em;
  opacity: 0;
  transition: .5s .7s ease all;
}
.active-2 .kids_illust .i-item4 {
  opacity: 1;
  transform: translate(1em, -2.5em) rotate(-20deg);
}


.kids_illust .i-item5 {
  bottom: 50%;
  left: 0;
  transform: translate(3em, 5.5em) rotate(0);
  width: 1.2em;
  opacity: 0;
  transition: .5s .5s ease all;
}
.active-2 .kids_illust .i-item5 {
  opacity: 1;
  transform: translate(2em, 4.5em) rotate(20deg);
}


.kids_illust .i-item6 {
  bottom: 50%;
  right: 0;
  transform: translate(1em, 9em) rotate(0);
  width: 1.3em;
  opacity: 0;
  transition: .5s .5s ease all;
}
.active-2 .kids_illust .i-item6 {
  opacity: 1;
  transform: translate(0em, 8em) rotate(20deg);
}


.kids_illust .illust_r {
  transform: scaleX(-1);
}

#sec03 .kids_cnt .text .border {
    background: linear-gradient(transparent 70%, #FFC865 30%);
}


/* キッズクラブコンテンツ */
#sec03 .fukidashi {
  position: relative;
  width: 28rem;
  margin: 0 auto 1.6em auto;
  text-align: center;
  font-size: 1.6em;
  font-weight: 700;
  color: #33C5FF;
}

#sec03 .fukidashi span {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50% , 100%);
  width: 100%;
  height: .7em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 447 17'%3E%3Cpath d='M1.25 1.25H201L223.5 15.25L246 1.25H445.25' fill='none' stroke='%2333C5FF' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

#sec03 .flex{
  gap: 2em;
  justify-content: space-between;
}

#sec03 .flex li {
  position: relative;
  width: calc(100% / 3 - 2em);
  height: auto;
  aspect-ratio: 10 / 9;
  max-height: 350px;
  border-radius: 0 0 2.7em 0;
  opacity: 0;
}
#sec03 .flex li.flex-1 {
  transition: 1s ease all;
}
#sec03 .flex li.flex-2 {
  transition: 1s .2s ease all;
}
#sec03 .flex li.flex-3 {
  transition: 1s .4s ease all;
}
#sec03 .flex.active-2 li {
  opacity: 1;
}

#sec03 .flex li::after {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  transform: translate(.5em , .5em);
  width: 100%;
  height: calc(100% - 2.5em);
  border: .5em solid #33C5FF;
  border-top: 0;
  border-left: 0;
  border-radius: 0 0 2.7em 0;
}

#sec03 .flex-t {
  display: flex;
  align-items: flex-start;
  font-size: 1.1em;
  font-size: max( .9vw , 1.1em );
  font-weight: 700;
  color: #33C5FF;
  gap: .2em;
  margin-left: .5em;

}

#sec03 .flex-t span {
  display: block;
  transform: translateY(-.5rem);
  width: 2.5em;
  height: auto;
  aspect-ratio: 4 / 5;
}

#sec03 .flex-1 .flex-t span {
    background: url(images/kids-1.webp) no-repeat center / contain;
}
#sec03 .flex-2 .flex-t span {
    background: url(images/kids-2.webp) no-repeat center / contain;
}
#sec03 .flex-3 .flex-t span {
    background: url(images/kids-3.webp) no-repeat center / contain;
}

#sec03  .flex img {
  display: block;
  width: auto;
  height: 46%;
  object-fit: contain;
  margin: 0 auto;
}

#sec03 .flex .t-cnt {
  margin-top: 1em;
  text-align: center;
  line-height: 1.5;
  font-weight: 700;
}

span.color-o {
  color: #E97132;
}


#sec03 .note {
  margin: 2.7em 0;
  opacity: 0;
  transition: 1s ease all;
}

#sec03 .note.active-2 {
  opacity: 1;
}

/* キッズコンテンツ装飾 */

#sec03 .flex .kids-illust-1 img {
  height: auto;
}

#sec03 .flex .kids-illust-1 img.i-item1 {
  bottom: 0;
  left: 0;
  transform: translate(1em , 0em) rotate(-10deg);
  width: 3.4em;
  opacity: 0;
  transition: .5s 1s ease all;
}
#sec03 .flex.active-2 .kids-illust-1 img.i-item1 {
  opacity: 1;
  transform: translate(-1em , 2em) rotate(0);
}

#sec03 .flex .kids-illust-1 img.i-item2 {
  top: 0;
  right: 0;
  transform: translate(-1em , 4em) rotate(20deg);
  width: 3em;
  opacity: 0;
  transition: .5s 1s ease all;
}
#sec03 .flex.active-2 .kids-illust-1 img.i-item2 {
  opacity: 1;
  transform: translate(.5em , 2.8em) rotate(0);
}

#sec03 .flex .kids-illust-2 img.i-item1 {
  top: 0;
  left: 0;
  transform: translate(1em , 3em);
  width: 1.5em;
  opacity: 0;
  transition: .5s 1s ease all;
}
#sec03 .flex.active-2 .kids-illust-2 img.i-item1 {
  opacity: 1;
  transform: translate(0 , 2em);
}


#sec03 .flex .kids-illust-2 img.i-item2 {
  bottom: 0;
  right: 0;
  transform: translate(-3em , 2em) rotate(20deg);
  width: 4em;
  opacity: 0;
  transition: .5s 1s ease all;
}
#sec03 .flex.active-2 .kids-illust-2 img.i-item2 {
  opacity: 1;
  transform: translate(-2em , 4em) rotate(0);
}


#sec03 .flex .kids-illust-3 img.i-item1 {
  bottom: 0;
  left: 0;
  transform: translate(3em , 3em) rotate(-10deg);
  width: 3.3em;
  opacity: 0;
  transition: .5s 1s ease all;
}
#sec03 .flex.active-2 .kids-illust-3 img.i-item1 {
  opacity: 1;
  transform: translate(2em , 4em) rotate(0);
}


#sec03 .flex .kids-illust-3 img.i-item2 {
  top: 0;
  right: 0;
  transform: translate(-1em , 3em) rotate(10deg);
  width: 2.3em;
  opacity: 0;
  transition: .5s 1s ease all;
}
#sec03 .flex.active-2 .kids-illust-3 img.i-item2 {
  opacity: 1;
  transform: translate(0 , 2em) rotate(0);
}


/* ------------------------------------------------------- TOPページ お知らせ ------------------------------------------------------- */


#sec04 {
  position: relative;
  z-index: 2;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  background-color: #33C5FF;
  padding: 4em 0;
}


#sec04 h2 {
  position: relative;
  display: inline-block;
  background-color: #fff;
  color: #33C5FF;
  padding: .2em 1em .2em 0;
  border-radius: 0 50vw 50vw 0;
  opacity: 0;
  transform: translateX(-100%);
  transition: 1s ease all;
}
#sec04.active h2 {
  opacity: 1;
  transform: translateX(0);
}


#sec04 h2::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transform: translateX(-99%);
  width: 100%;
  height: 100%;
  background-color: #fff;
}

/* スライダー */

.news-s_wrap {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 1440px;
  opacity: 0;
  transition: 1s ease all;
}
.active .news-s_wrap {
  opacity: 1;
}

#sec04 .splide {
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 2.7em;
}
 @media screen and (min-width: 1440px){
  #sec04 .splide {
    width: 100%;
  }
}


#sec04 .splide__slide {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 1.1em;
  max-width: 300px;
  text-align: center;
  align-content: center;
  /* transform: scale(1);
  transition: .2s ease all; */
}


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

#sec04 .splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: .2s ease all;

}
#sec04 .splide__slide:hover img {
  transform: scale(1.1);
}


#sec04 .splide__arrows {
  position: absolute;
  width: 8em;
  height: 3.5em;
  right: 0;
  z-index: 2;
  bottom: 0;
  transform: translate(-1.5em , 1em);
}

#sec04 .splide__pagination {
  bottom: 0;
  transform: translateY(1.5em);
  gap: .3em;
}

#sec04 .splide__pagination__page {
  background-color: #fff;
}

#sec04 .splide__pagination__page.is-active {
  opacity: 1;
}

/* お知らせイラスト */

.sec04_illust .i-item1 {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(-3.5em , -98%);
  width: min(17vw , 14em);
  aspect-ratio: 1 / 1;
}

.sec04_illust .i-item1 .itme-1 {
  bottom: 0;
  width: 100%;
  opacity: 0;
  transform: translateX(30%);
  transition: 1s ease all;
}
.sec04_illust .i-item1.active-2 .itme-1 {
  opacity: 1;
  transform: translateX(0);
}

.sec04_illust .i-item1 .itme-2 {
  top: 0;
  left: 0;
  transform: translate(1em , -2em) rotate(10deg);
  width: 1.8em;
  opacity: 0;
  transition: 1s .5s ease all;
}
.sec04_illust .i-item1.active-2 .itme-2 {
  opacity: 1;
  transform: translate(0 , -3em) rotate(20deg);
}


.sec04_illust .i-item1 .itme-3 {
  top: 0;
  left: 0;
  transform: translate(4em , -1em) rotate(-20deg);
  width: 1.4em;
  opacity: 0;
  transition: 1s .6s ease all;
}
.sec04_illust .i-item1.active-2 .itme-3 {
  opacity: 1;
  transform: translate(3em , -2em) rotate(-30deg);
}



.sec04_illust .illust-flex.i-item2 {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(20em , .5em);
  width: 5.5em;
  aspect-ratio: 10 / 3;

}
.sec04_illust .i-item2 img {
  position: initial;
  width: calc(100% / 3 - .15em);
}

/* 動画 */
/* .sec04_illust .i-item3 {
  display: none;
} */


/* ------------------------------------------------------- TOPページ キッズコンテンツ ------------------------------------------------------- */

#kids h2 {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #33C5FF;
  opacity: 0;
  transform: translateY(1em);
  transition: 1s ease all;
}

#kids.active h2 {
  opacity: 1;
  transform: translateY(0);
}


.kids_in {
  position: relative;
  width: 90%;
  max-width: 1200px;
  height: auto;
  aspect-ratio: 3 / 1;
  margin: 1em auto 2em auto;
  /* background: url(images/kids_banner.webp) no-repeat center bottom / cover; */
  transform: translateY(1em);
  opacity: 0;
  transition: 1s ease all;
}

.kids_img-pc {
  width: 100%;
  height: 100%;
  border-radius: 1.1em;
  overflow: hidden;
}
.kids_img-pc img.seibu-kids {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: .5s ease all;

}
.kids_in:hover img.seibu-kids {
  transform: scale(1.05);
}


.kids_in.active-2 {
  opacity: 1;
  transform: translateY(0);
}

.kids_in a {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  /* background-color: #eee; */
}

.kids-i.kids-01 {
  margin-bottom: 5vw;
}

.kids-i {
  position: relative;
  opacity: 0;
  transform: translateY(1em);
  transition: .5s ease all;
}
.kids-i.active-2 {
  opacity: 1;
  transform: translateY(0);
}
.kids-cnt {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50% , -10%) scale(1);
  width: 33em;
  padding: 2em 0;
  margin: 0 auto;
  border-radius: 1em;
  transform-origin: center;
  background: #fff url(images/arrow-1-b.webp) no-repeat 90% / 1em;
  transition: .2s ease all;

}

.kids-cnt::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 1.5em);
    height: calc(100% - 1.5em);
    border-radius: .8em;
    border: #33C5FF 3px dashed;
    transition: .15s ease-out all;
}

.kids-cnt:hover {
  transform: translate(-50% , -10%) scale(1.05);
  filter: drop-shadow(.38em .27em .27em rgba(0, 0, 0, 0));
  background: #33C5FF url(images/arrow-1-w.webp) no-repeat 90% / 1em;
}
.kids-cnt:hover::before {
    border: #fff 3px dashed;
}

.kids-cnt a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.kids-cnt p {
  font-weight: 700;
  color: #33C5FF;
  font-size: 1.6em;
  transition: .15s ease-out all;
}
.kids-cnt:hover p {
  color: #fff;
}

.kids-banner_illust .i-item1 ,
.kids-banner2_illust .i-item1 {
  top: 0;
  left: 0;
  transform: translate(-40%, -20%) rotate(10deg);
  width: 15%;
  opacity: 0;
  transition: 1s .2s ease all;
}
.active-2 .kids-banner_illust .i-item1,
.active-2 .kids-banner2_illust .i-item1 {
  opacity: 1;
  transform: translate(-50%, -20%) rotate(0);
}

.kids-banner_illust .i-item2,
.kids-banner2_illust .i-item2 {
  bottom: 0;
  right: 0;
  transform: translate(40%, 20%) rotate(-10deg) scale(-1);
  width: 15%;
  opacity: 0;
  transition: 1s .2s ease all;
}
.active-2 .kids-banner_illust .i-item2,
.active-2 .kids-banner2_illust .i-item2 {
  opacity: 1;
  transform: translate(50%, 20%) rotate(0) scale(-1);
}

.kids-banner_illust .i-item3 {
  bottom: 0;
  left: 0;
  transform: translate(-10% , -20%);
  width: 16%;
  opacity: 0;
  transition: .5s .2s ease all;
}
.active-2 .kids-banner_illust .i-item3{
  opacity: 1;
  transform: translate(-10% , -30%)
}


.kids-banner_illust .i-item4 {
  top: 0;
  right: 0;
  transform: translate(15% , 20%);
  width: 18%;
  opacity: 0;
  transition: .5s .2s ease all;
}
.active-2 .kids-banner_illust .i-item4 {
  opacity: 1;
  transform: translate(15% , 10%);
}

.kids-banner_illust .i-item5 {
  bottom: 0;
  left: 50%;
  transform: translate(-50% , 20%);
  width: 50%;
  opacity: 0;
  transition: .5s .2s ease all;
}
.active-2 .kids-banner_illust .i-item5 {
  opacity: 1;
  transform: translate(-50% , 10%);
}


.kids-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .2s ease all;
}


.kids_in2 {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4em 0;
  opacity: 0;
  transform: translateY(1em);
  transition: 1s ease all;
}
.kids_in2.active-2 {
  opacity: 1;
  transform: translateY(0);
}

.kids-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.kids_in2 .kids-cnt2 {
  position: relative;
  width: calc(100% / 2 - .5em);
  /* height: auto; */
  overflow: hidden;
  text-align: center;
  border-radius: .8em;
  border: #FFB327 solid .2em;
}
.kids_in2 .kids-cnt2.kids-banner_2 {
  border: #FF849A solid .2em;
}


.kids_in2 .kids-cnt2 img {
  width: 100%;
  height: 100%;
  transform: scale(1);
  transition: .5s ease all;
}

.kids_in2 .kids-cnt2:hover img {
  transform: scale(1.05);
}

.kids-cnt2 a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  /* background-color: #eee; */
}

.kids-cnt2 p {
  color: #fff;
  font-size: 1.2em;
  font-weight: 700;
  transition: .2s ease all;
}

.kids-cnt2:hover p {
  color: #FFB327;
}


#kids .kids-text {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 1em;
  text-align: center;
  opacity: 0;
  transform: translateY(1em);
  transition: 1s ease all;
}
#kids .kids-text.active-2 {
  opacity: 1;
  transform: translateY(0);
}



/* ------------------------------------------------------- TOPページ インフォメーション ------------------------------------------------------- */

/* 動画 */
#sec05.sec {
  position: relative;
  padding: 8em 0 4em 0;
  /* display: none; */
}


#sec05 h2 {
  position: relative;
  z-index: 1;
  margin-bottom: .5em;
  text-align: center;
  color: #9CCF45;
  opacity: 0;
  transform: translateY(1em);
  transition: .5s ease all;
}

#sec05 .info-m.active-2 h2 {
  opacity: 1;
  transform: translateY(0);
}

#sec05 .movie {
  position: relative;
  left: 50%;
  transform: translate(-50% , 1em);
  width: 100vw;
  max-width: 1440px;
  opacity: 0;
  transition: .5s ease all;
}

#sec05 .info-m.active-2 .movie {
  opacity: 1;
  transform: translate(-50% , 0);
}

#sec05 .movie-cnt {
  position: relative;
  width: 90%;
  max-width: 1200px;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 1.1em;
  overflow: hidden;
  background: url(images/commingsoon_thumbnail.webp) no-repeat center / contain;
  background-color: #D8D8D8;
}

#sec05 .movie .movie-t {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  transform: translate(0 , -20%);
  width: 26em;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50vw;
}
.circletext__circle {
  fill: none;
  stroke: none;
}

.block {
  width: 160px;
  height: 160px;
  margin: auto;
}
.circletext {
  overflow: visible;
  animation: rotateCircle 25s linear infinite;
}
@keyframes rotateCircle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.circletext_circle {
    fill: none;
  }
.circletext_text {
  pointer-events: none;
  fill: #EBF3DC;
  font-size: .8em;
  font-weight: 700;
  letter-spacing: 0.04em;
  }


  /* インフォメーションイラスト */

  .sec05_illust {
    width: 110%;
  }

  .sec05_illust .i-item1 {
    top: 0;
    left: 0;
    transform: translate(1em , 3em);
    width: 3.3em;
    opacity: 0;
    transition: .5s ease all;
  }

 #sec05.active .sec05_illust .i-item1 {
  opacity: 1;
    transform: translate(1em , 2em);
  }


  .sec05_illust .i-item2 {
    top: 0;
    left: 0;
    transform: translate(9em , 11em);
    width: 3em;
      opacity: 0;
    transition: .5s .2s ease all;
  }

 #sec05.active .sec05_illust .i-item2 {
  opacity: 1;
    transform: translate(9em , 10em);
  }


  .sec05_illust .i-item3 {
    top: 0;
    left: 0;
    transform: translate(7em , -40%);
    width: 16em;
    opacity: 0;
    transition: 1s ease all;
  }

 #sec05.active .sec05_illust .i-item3 {
  opacity: 1;
    transform: translate(9em , -40%);
  }




/* ------------------------------------------------------- TOPページ アンケートレポート ------------------------------------------------------- */

/* 動画が来たら変更 */
#sec06.sec {
  padding: 4em 0;
  /* padding: max(8vw , 8em) 0 4em 0; */
}


#sec06 h2,
#sec07 h2 {
  text-align: center;
  margin-bottom: 1em;
  font-size: 2.5em;
  color: #522519;
  transition: 1s ease all;
  opacity: 0;
  transform: translateY(1em);
}

#sec06 h2::before,
#sec07 h2::before {
  display: inline-block;
  content: '';
  transform: translateY(.1em);
  width: 1em;
  height: 1em;
  margin-right: .2em;
  background: url(images/header-nav-4.webp) no-repeat center / contain;
}

#sec06 .active h2 {
  opacity: 1;
  transform: translateY(0);
}

#sec06 .report-cnt {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
}
#sec06 .report-cnt::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-100% ,-50%);
  z-index: -1;
  width: 80%;
  height: 100%;
  border-radius: 0 50vw 50vw 0;
  background-color: #F7FFE9;
  opacity: 0;
  transition: .5s .5s ease all;
}
#sec06 .report-cnt.active-2::after {
  opacity: 1;
  transform: translate(0 ,-50%);
}

#sec06 .report-cnt .report-flex {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.7em 0;
}
#sec06 .flex {
  margin-bottom: 1.6em;
}

#sec06 .flex.pc {
  display: flex;
  justify-content: center;
  opacity: 0;
  transition: 1s ease all;
  transform: translateY(1em);
}
#sec06 .active-2 .flex.pc {
  opacity: 1;
  transform: translateY(0);
}

#sec06 .flex li.post-item {
  width: calc(100% / 3 - 1.35em);
  aspect-ratio: 1 / 1;
  background-color: #fff;
  border: #33C5FF solid .05em;
  border-radius: 1.1em;
  transition: .2s ease-in-out all;
  transform: scale(1);
}
#sec06 .flex li.post-item:hover {
  transform: scale(1.05);
}


/* アンケートレポートイラスト */

#sec06 .illust-wrap {
  max-width: 1440px;
  z-index: 2;
}

.report {
  position: relative;
}

.sec06_illust .i-item1 {
  top: 0;
  left: 0;
  transform: translate(6em , -20%);
  width: 15em;
  opacity: 0;
  transition: 1s .25s ease all;
}
.active .sec06_illust .i-item1 {
  opacity: 1;
  transform: translate(6em , -30%);
}

.sec06_illust .i-item2 {
  top: 0;
  right: 0;
  z-index: 2;
  transform: translate(-12em , 45%) rotate(0deg);
  width: 9.5em;
  opacity: 0;
  transition: .5s .5s ease all;
}
.active .sec06_illust .i-item2 {
  opacity: 1;
  transform: translate(-12em , 40%) rotate(-6deg);
}

.sec06_illust .i-item3 {
  top: 0;
  right: 0;
  transform: translate(0 , -45%) rotate(-10deg);
  width: 21em;
  opacity: 0;
  transition: .5s .5s ease all;
}
.active .sec06_illust .i-item3  {
  opacity: 1;
  transform: translate(0 , -48%) rotate(0);
}


/* ------------------------------------------------------- TOPページ 自治体 ------------------------------------------------------- */


#sec07 h2 {
  margin-bottom: 0;
  opacity: 0;
  transform: translateY(1em);
  transition: 1s 1s ease all;
}
#sec07 .active h2 {
  opacity: 1;
  transform: translateY(0);
}

#sec07 h2::before {
  background: url(images/header-nav-7.webp) no-repeat center / contain;
}

.sec-t {
  font-weight: 700;
  text-align: center;
  opacity: 0;
  transform: translateY(1em);
  transition: 1s ease all;
}
.active .sec-t {
  opacity: 1;
  transform: translateY(0);
}

#sec07 .sec-t {
  transition: 1s 1.5s ease all;
}

.sec-t span {
  display: inline-block;
}

#kids .sec-t {
  margin-bottom: .5em;
}


/* マップ */

.cls-1 { fill: #d5ecce; }
.cls-2 { fill: #ffd819; }
.cls-3 { fill: #ff849a; }
.cls-4 { fill: #9ccf45; }
.cls-5 { fill: #d3dcff; }
.cls-6 { fill: #14c4e2; }

/* テキスト */
.cls-t1 {
  fill: #fff;
  stroke: #33C5FF;
  stroke-width: .1em;
}

/* ライン */
#area03 .area-line {
  fill: none;
  stroke: #ff849a;
  stroke-width: .1em;
}

#area04 .area-line {
  fill: none;
  stroke: #9CCF45;
  stroke-width: .1em;
}


.cls-t2 {
  fill: #522519;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 600;

}


#area-wrap .map-item ,
.modal-map .map-item2 {
  opacity: 1;
  transition: opacity 0.25s ease, filter 0.25s ease;
  cursor: pointer;
}

#area-wrap:has(.map-item:hover) .map-item:not(:hover),
.modal-map:has(.map-item2:hover) a:not(:has(.map-item2:hover)) {
  opacity: 0.3;
}

#area-wrap .map-item:hover,
.modal-map .map-item2:hover{
  opacity: 1;
  filter: drop-shadow(.38em .27em .27em rgba(0, 0, 0, 0.2));
}

.modal-map:has(.cls-t:hover) a:not(:has(.cls-t:hover)) {
    opacity: .3;
}

.modal-map .cls-t {
  opacity: 1;
}

.modal-map .map-item2.is-selected {
  opacity: 1 !important ;
  fill: #333;
}



/* エリア名 */
.area-label {
  font-size: .8em;
  fill: #333;
  font-weight: 600;
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: middle;
  font-family: "Zen Maru Gothic", sans-serif;

}


#area01 .area-label { fill: #8cec7b; }
#area02 .area-label { fill: #ffd819; }
#area03 .area-label { fill: #ff849a; }
#area04 .area-label { fill: #9CCF45; }
#area05 .area-label { fill: #a2c6ff; }
#area06 .area-label { fill: #14c4e2; }



/* 線路など重なり */

.area-map-wap {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

#area-wrap {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  transition: 1s ease-in all;
}
#area-wrap.active-2  {
  opacity: 1;
}



#area-add {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: 1s .5s ease-out all;
}
.active-2 #area-add {
  opacity: 1;
}
#area-add picture {
  position: relative;
  width: 100%;
  height: 100%;
  display: none;
}
#area-add picture.is-active {
  display: block;
}

#area-add img {
  position: absolute;
  width: 100%;
  object-fit: contain;
}




/* 切り替えボタン */

.toggle-btn {
  position: absolute;
  z-index: 10;
  bottom: 0;
  left: 50%;
  transform: translate(-20em, -6em);
  text-align: center;
}

.toggle-btn p {
  color: #522519;
  font-size: 1.1em;
  font-weight: 700;
}

/* スイッチ本体 */
.area-toggle {
  position: relative;
  width: 6.5em;
  height: 2.5em;
  background: #FFB327;
  border-radius: 999px;
  transition: 0.3s;
}
.area-toggle::before {
  content: "あり";
  color: #fff;
  font-weight: 700;
  font-family: "Zen Maru Gothic", sans-serif;
}

/* 丸いつまみ */
.area-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(.5em , -50%);
  width: 1.5em;
  height: 1.5em;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s;
}

/* ON状態 */
.area-toggle.is-active {
  background-color: #C4C4C4;
}

.area-toggle.is-active::after {
  transform: translate(4.6em , -50%);
}
.area-toggle.is-active::before {
  content: "なし";
}


/* モーダル */
#map-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  z-index: 101;
  width: 100vh;
  width: 90%;
  max-width: 1200px;
  height: auto;
  aspect-ratio: 10 / 7;
}
#map-modal.is-open {
  display: block;
}

#modal_bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  opacity: 0;
  display: none;
}
#modal_bg.active {
  opacity: .7;
  display: block;
}

.map-modal_in {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -40%);
  width: 100%;
  height: 100%;
  background: #fff;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: 2.7em;
  padding: 2em;
}

.modal-wrap {
  display: none;
}
.modal-wrap.is-active {
  display: block;
}

.modal-wrap .modal-map {
  width: 100%;
  height: 100%;
}
.modal-map svg {
  display: block;
  width: 90%;
  height: auto;
  margin: 0 auto;
  aspect-ratio: 5 / 3 ;
}

.modal-title {
  margin-bottom: 1em;
  font-size: 1.1em;
  font-weight: 700;
  color: #522519;
  text-align: center;
}


/* ボタン */
#map-modal__close {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(0 , -150%);
  z-index: 100;
  width: 2.5em;
  height: auto;
  aspect-ratio: 1 / 1;
}

/* ページネーション */
.modal-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  margin-top: 1em;
}

.page-dots {
  display: flex;
  gap: .5em;
}

.modal-page {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cfcfcf;
  cursor: pointer;
  transition: transform .2s;
}

.modal-page.is-active {
  background: #33C5FF;
  transform: scale(1.3);
}

.page-prev,
.page-next {
  background: none;
  border: none;
  cursor: pointer;
  width: 1em;
}

#sec07 .map {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  padding-bottom: 10em;
  margin-top: 2em;
}

#sec07 .map_in {
  width: 95%;
  position: relative;
  margin: 0 auto;
  max-width: 1440px;
}

/* 波 */
#sec07 .map .bg_1 {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 50%;
  transform: translate(-50% , 0);
  width: 100vw;
  height: 100%;
  background-color: #F7FFE9;

    /* マスク */
  -webkit-mask-image: url(images/map-bg2.webp);
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-position: bottom center;
  -webkit-mask-size: min(1694px, 130vw) auto;

  mask-image: url(images/map-bg2.webp);
  mask-repeat: repeat-x;
  mask-position: bottom center;
  mask-size: min(1694px, 130vw) auto;

}

@media screen and (max-width: 1964px){
  #sec07 .map .bg_1 {
    -webkit-mask-position: bottom left;
    -webkit-mask-size: min(1964px, 135vw) auto;

    mask-position: bottom left;
    mask-size: min(1964px, 135vw) auto;

  }
}

.map_train {
  width: 100%;
  height: 100%;
  background: url(images/senro.webp) repeat-x bottom center / 20em;
  background-position-y: calc(100% - 1em);
}

.t-box {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4vw;
  max-height: 70px;
}
.t-box img {
  width: 5em;
  animation: map_train 20s linear infinite;
}

@keyframes map_train {
  0% {
    transform: translateX(-250%);
  }
  100% {
    transform: translateX(110vw);
  }
}



/* 自治体イラスト */
.map_bg_illust .i-item1 {
  bottom: 0;
  left: 0;
  transform: translate(6em , -18em) scaleX(-1) rotate(20deg);
  width: 2.3em;
  opacity: 0;
  transition: .5s ease all;
}
.map_bg_illust .i-item1.active-2 {
  transform: translate(8em , -20em) scaleX(-1) rotate(0);
  opacity: 1;

}
.map_bg_illust .i-item2 {
  bottom: 0;
  left: 0;
  transform: translate(7em , -5em);
  width: 2.2em;
  opacity: 0;
  transition: .5s .1s ease all;
}
.map_bg_illust .i-item2.active-2 {
  transform: translate(7em , -7em);
  opacity: 1;
}

.map_bg_illust .i-item3 {
  bottom: 0;
  left: 0;
  transform: translate(9.5em , -5em);
  width: 1.5em;
  opacity: 0;
  transition: .5s .2s ease all;
}
.map_bg_illust .i-item3.active-2 {
  opacity: 1;
  transform: translate(9.5em , -7em);
}

.map_bg_illust .i-item4 {
  bottom: 0;
  left: 0;
  transform: translate(12em , -8em);
  width: 3.6em;
  opacity: 0;
  transition: .5s .3s ease all ;
}
.map_bg_illust .i-item4.active-2 {
  opacity: 1;
  transform: translate(12em , -10em);
}

.map_bg_illust .i-item5 {
  bottom: 0;
  left: 0;
  transform: translate(18em , -9em);
  width: 3.5em;
  opacity: 0;
  transition: .5s .4s ease all;
}
.map_bg_illust .i-item5.active-2 {
  opacity: 1;
  transform: translate(18em , -11em);
}

.map_bg_illust .i-item6 {
  bottom: 0;
  left: 50%;
  transform: translate(-10em , -7em);
  width: 2.2em;
  opacity: 0;
  transition: .5s .5s ease all;
}
.map_bg_illust .i-item6.active-2 {
  opacity: 1;
  transform: translate(-10em , -9em);
}

.map_bg_illust .i-item7 {
  bottom: 0;
  left: 50%;
  transform: translate(-7em , -7em);
  width: 2.2em;
  opacity: 0;
  transition: .5s .6s ease all;
}
.map_bg_illust .i-item7.active-2 {
  opacity: 1;
  transform: translate(-7em , -9em);
}

.map_bg_illust .i-item8 {
  bottom: 0;
  left: 50%;
  transform: translate(-3em , -5.5em);
  width: 2.6em;
  opacity: 0;
  transition: .5s .7s ease all;
}
.map_bg_illust .i-item8.active-2 {
  opacity: 1;
  transform: translate(-3em , -7.5em);
}

.map_bg_illust .i-item9 {
  bottom: 0;
  left: 50%;
  transform: translate(.5em , -5.5em);
  width: 2em;
  opacity: 0;
  transition: .5s .8s ease all;
}
.map_bg_illust .i-item9.active-2 {
  opacity: 1;
  transform: translate(.5em , -7.5em);
}

.map_bg_illust .i-item10 {
  bottom: 0;
  right: 0;
  transform: translate(-8em , -4em);
  width: 2em;
  opacity: 0;
  transition: .5s .9s ease all;
}
.map_bg_illust .i-item10.active-2 {
  opacity: 1;
  transform: translate(-8em , -6em);
}

.map_bg_illust .i-item11 {
  bottom: 0;
  right: 0;
  transform: translate(-6em , -4em);
  width: 1.6em;
  opacity: 0;
  transition: .5s 1s ease all;
}
.map_bg_illust .i-item11.active-2 {
  opacity: 1;
  transform: translate(-6em , -6em);
}


/* 自治体一覧 */
#sec07.sec {
  position: relative;
  z-index: 2;
  padding: 16em 0 8em 0;
}

#sec07 .sec-in {
  position: relative;
  padding-top: 4em;
}

#sec07 .map-list {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  padding: 5em 0;
  text-align: center;
  background-color: #9CCF45;
}

#sec07 .map-list h3 {
  margin-bottom: 1em;
  font-family: "ab-tombo-bold", sans-serif;
  font-size: 2.2em;
  color: #fff;
  opacity: 0;
  transform: translateY(1em);
  transition: 1s ease all;
}
#sec07 .map-list.active h3 {
  opacity: 1;
  transform: translateY(0);
}
#sec07 .map-list h2::before {
  display: none;
}

#sec07 .map-list.active h3 span {
  display: inline-block;
}

#sec07 .map-list .list-in {
  width: 85%;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 1.1em;
  background-color: #fff;
}


#sec07 .list-cnt {
  width: 80%;
  margin: 0 auto;
  padding: 2.7em 0;
}


#sec07 .list-in .list-area {
  display: inline-block;
  position: relative;
  margin-bottom: 1.6em;
  font-size: 1.3em;
  font-weight: 700;
  opacity: 0;
  transform: translateY(1em);
  transition: 1s ease all;
}
#sec07 .list-in .list-area.active-2 {
  opacity: 1;
  transform: translateY(0);
}

#sec07 .list-in .list-area::before,
#sec07 .list-in .list-area::after {
  position: absolute;
  content: '';
  top: 50%;
  left: 0;
  transform: translate(-150% , -50%);
  width: 2em;
  height: .16em;
  background-color: #33C5FF;
}
#sec07 .list-in .list-area::after {
  left: auto;
  right: 0;
  transform: translate(150% , -50%);
}

#sec07 .list-in .list-2 .list-area::before,
#sec07 .list-in .list-2 .list-area::after {
  background-color: #FFB327;
}

#sec07 .list-in .list-1 .list-area {
  color: #33C5FF;
}
#sec07 .list-in .list-2 .list-area {
  color: #FFB327;
}

/* ボタン */

#sec07 .list-item {
  position: relative;
  width: calc(100% / 4 - 1.5em);
  padding: .5em 0;
  border-radius: 50vw;
  opacity: 0;
  transition: .5s ease all;
}
#sec07 .list-item .flex.pc {
  transition: .2s ease-in-out all;
  transform: translate(0 , 1em);
  opacity: 0;
}

#sec07 .list-item.active-2 {
  opacity: 1;
  transform: translate(0 , 0);
}

#sec07 .list-item:hover {
  transform: translate(.3em , .3em);
}

#sec07 .list-item::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50vw;
  background: #fff url(images/arrow-1-br.webp) no-repeat 90% / .6em;
}

#sec07 .list-item::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  transform: translate(.3em , .3em);
  width: 100%;
  height: 100%;
  border-radius: 50vw;
  transition: .2s ease-in-out all;
  opacity: 1;
}
#sec07 .list-item:hover::after {
  opacity: 0;
}

#sec07 .list-item.list-1::after {
  background-color: #33C5FF;
}
#sec07 .list-item.list-1 {
  border: #33C5FF .16em solid;
  background-color: #33C5FF;
}
#sec07 .list-item.list-1:hover::before {
  background: #33C5FF url(images/arrow-1-br.webp) no-repeat 90% / .6em;
}



#sec07 .list-item.list-2::after {
  background-color: #D3DCFF;
}
#sec07 .list-item.list-2 {
  border: #D3DCFF .16em solid;
  background-color: #D3DCFF;
}
#sec07 .list-item.list-2:hover::before {
  background: #D3DCFF url(images/arrow-1-br.webp) no-repeat 90% / .6em;
}


#sec07 .list-item.list-4::after {
  background-color: #FF849A;
}
#sec07 .list-item.list-4 {
  border: #FF849A .16em solid;
  background-color: #FF849A;
}
#sec07 .list-item.list-4:hover::before {
  background: #FF849A url(images/arrow-1-br.webp) no-repeat 90% / .6em;
}

#sec07 .list-item.list-5::after {
  background-color: #FFD819;
}
#sec07 .list-item.list-5 {
  border: #FFD819 .16em solid;
  background-color: #FFD819;
}
#sec07 .list-item.list-5:hover::before {
  background: #FFD819 url(images/arrow-1-br.webp) no-repeat 90% / .6em;
}

#sec07 .list-item.list-6::after {
  background-color: #D5ECCE;
}
#sec07 .list-item.list-6 {
  border: #D5ECCE .16em solid;
  background-color: #D5ECCE;
}
#sec07 .list-item.list-6:hover::before {
  background: #D5ECCE url(images/arrow-1-br.webp) no-repeat 90% / .6em;
}

#sec07 .list-item.list-7::after {
  background-color: #9CCF44;
}
#sec07 .list-item.list-7 {
  border: #9CCF44 .16em solid;
  background-color: #9CCF44;
}
#sec07 .list-item.list-7:hover::before {
  background: #9CCF44 url(images/arrow-1-br.webp) no-repeat 90% / .6em;
}

#sec07 .list-item p {
  position: relative;
  z-index: 2;
  font-weight: 700;
  color: #522519;
}

#sec07 .list-item a {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
}

/* 自治体背景 */

.map-illust {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translate(-50% , -12em);
  width: 150vw;
  max-width: 1920px;
  height: 100%;
  overflow: hidden;
}

.map-illust .map-i-wrap {
  width: 100%;
  height: 100%;
  transform:rotate(10deg);
  opacity: 0;
  transition: 1s ease-in-out all;
}
.active .map-illust .map-i-wrap {
  opacity: 1;
  transform: rotate(0);
}

.map-illust img {
  width: 100%;
  height: auto;
}


#sec07 .map-illust .bg {
  overflow: hidden;
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  transform: translate(-50% , 8em);
  background-color: #fff;
  width: 200vw;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

@media screen and (min-width: 1920px) {
  #sec07 .map-illust .bg {
    width: 150vw;
  }

  .map-illust {
    width: 100vw;
    transform: translate(-50% , -10em);
    max-width: initial;
  }

}

/* 自治体イラスト */

#sec07 .map-list {
  position: relative;
}

.sec07_illust-1 {
  max-width: initial;
  overflow-x: hidden;
  overflow: hidden;
}

.sec07_illust-1 .illust_in {
  margin: 0 auto;
  max-width: 1440px;
}

.sec07_illust-1 .i-item1 {
  bottom: 0;
  left: 0;
  transform: translate(-50% , 40%);
  width: 42em;
  opacity: 0;
  transition: .5s ease all;
}
.sec07_illust-1 .i-item1.active-2 {
  opacity: 1;
  transform: translate(-50% , 30%);
}


.sec07_illust-1 .i-item2 {
  top: 0;
  right: 0;
  transform: translate(13em , -7em);
  width: 30em;
  opacity: 0;
  transition: .5s ease all;
}
.sec07_illust-1 .i-item2.active-2 {
  opacity: 1;
  transform: translate(13em , -5em);
}


#sec07 .list-in {
  position: relative;
}


.sec07_illust-2 .i-item1 {
  top: 0;
  left: 0;
  transform: translateY(-70%);
  width: min(18vw , 18em);
  opacity: 0;
  transition: .5s ease-in-out all;
}
.sec07_illust-2 .i-item1.active-2  {
  opacity: 1;
  transform: translateY(-80%);

}

.sec07_illust-2 .i-item2 {
  bottom: 50%;
  left: 0;
  transform: translate(-40% , 70%);
  width: 4.8em;
  opacity: 0;
  transition: .5s ease all;
}
.sec07_illust-2 .i-item2.active-2 {
  opacity: 1;
  transform: translate(-60% , 50%);
}

.sec07_illust-2 .i-item3 {
  bottom: 0;
  left: 0;
  transform: translate(-10% , -8em) rotate(-40deg);
  width: 4.5em;
  opacity: 0;
  transition: .5s ease all;
}
.sec07_illust-2 .i-item3.active-2 {
  opacity: 1;
  transform: translate(-30% , -10em) rotate(-20deg);
}

.sec07_illust-2 .i-item4 {
  bottom: 50%;
  left: 0;
  transform: translate(3.5em , -1em) rotate(00deg);
  width: 1.5em;
  opacity: 0;
  transition: .5s ease all;
}
.sec07_illust-2 .i-item4.active-2 {
  opacity: 1;
  transform: translate(1.5em , -3em) rotate(20deg);
}

.sec07_illust-2 .i-item5 {
  bottom: 50%;
  right: 0;
  transform: translate(1em , -1em) rotate(-20deg);
  width: 6em;
  opacity: 0;
  transition: .5s ease all;
}
.sec07_illust-2 .i-item5.active-2 {
  opacity: 1;
  transform: translate(3em , -3em) rotate(-40deg);
}

.sec07_illust-2 .i-item6 {
  bottom: 0;
  right: 0;
  transform: translate(3em , -.5em);
  width: 8em;
  opacity: 0;
  transition: .5s ease all;
}
.sec07_illust-2 .i-item6active-2 {
  opacity: 1;
  transform: translate(5em , -2.5em);
}

/* 白_左 */
.sec07_illust-2 .i-item7 {
  bottom: 50%;
  left: 0;
  transform: translate(-2em , -0.5em);
  width: .5em;
  opacity: 0;
  transition: .5s ease all;
}
.sec07_illust-2 .i-item7.active-2 {
  opacity: 1;
  transform: translate(-4em , -2.5em);
}

.sec07_illust-2 .i-item8 {
  top: 0;
  left: 0;
  transform: translate(-2em , 8.5em) rotate(-40deg);
  width: 1.6em;
  opacity: 0;
  transition: .5s ease all;
}
.sec07_illust-2 .i-item8.active-2 {
  opacity: 1;
  transform: translate(-4em , 6.5em) rotate(-20deg);
}
.sec07_illust-2 .i-item9 {
  top: 0;
  left: 0;
  transform: translate(-2em , 14em) rotate(-40deg);
  width: 1.5em;
  opacity: 0;
  transition: .5s ease all;
}
.sec07_illust-2 .i-item9.active-2 {
  opacity: 1;
  transform: translate(-5em , 12em) rotate(-20deg);
}

.sec07_illust-2 .i-item10 {
  top: 50%;
  left: 0;
  transform: translate(-.5em , -6em) rotate(0deg);
  width: .8em;
  opacity: 0;
  transition: .5s ease all;
}
.sec07_illust-2 .i-item10.active-2 {
  opacity: 1;
  transform: translate(-2.5em , -8em) rotate(20deg);
}


.sec07_illust-2 .i-item11 {
  top: 0;
  left: 0;
  transform: translate(-5.5em , 3.5em) rotate(-65deg);
  width: 3em;
  opacity: 0;
  transition: .5s ease all;
}
.sec07_illust-2 .i-item11.active-2 {
  opacity: 1;
  transform: translate(-7.5em , 1.5em) rotate(-45deg);
}

/* 白_右 */
.sec07_illust-2 .i-item12 {
  bottom: 0;
  right: 0;
  transform: translate(2.5em , -6.5em);
  width: .8em;
  opacity: 0;
  transition: .5s ease all;
}
.sec07_illust-2 .i-item12.active-2 {
  opacity: 1;
  transform: translate(4.5em , -8.5em);
}

.sec07_illust-2 .i-item13 {
  bottom: 0;
  right: 0;
  transform: translate(1em , -16em) rotate(0deg);
  width: 1.7em;
  opacity: 0;
  transition: .5s ease all;
}
.sec07_illust-2 .i-item13.active-2 {
  opacity: 1;
  transform: translate(3em , -18em) rotate(-20deg);
}

.sec07_illust-2 .i-item14 {
  bottom: 0;
  right: 0;
  transform: translate(5.5em , -13em) rotate(0deg);
  width: 2.5em;
  opacity: 0;
  transition: .5s ease all;
}
.sec07_illust-2 .i-item14.active-2 {
  opacity: 1;
  transform: translate(7.5em , -15em) rotate(-20deg);
}

.sec07_illust-2 .i-item15 {
  bottom: 0;
  right: 0;
  transform: translate(2em , -11em) rotate(-25deg);
  width: 1.5em;
  opacity: 0;
  transition: .5s ease all;
}
.sec07_illust-2 .i-item15.active-2 {
  opacity: 1;
  transform: translate(4em , -13em) rotate(-45deg);
}

.sec07_illust-2 .i-item16 {
  bottom: 0;
  right: 0;
  transform: translate(3em , -20em) rotate(50deg);
  width: 1.3em;
  opacity: 0;
  transition: .5s  ease all;
}
.sec07_illust-2 .i-item16.active-2 {
  opacity: 1;
  transform: translate(5em , -22em) rotate(30deg);
}

.sec07_illust-2 .i-item17 {
  bottom: 50%;
  right: 0;
  transform: translate(2.5em , 4em);
  width: .5em;
  opacity: 0;
  transition: .5s ease all;
}
.sec07_illust-2 .i-item17.active-2 {
  opacity: 1;
  transform: translate(4.5em , 2em);
}


.map-illust-2 .i-item1 {
  top: 0;
  right: 0;
  transform: translate(2em , -6em);
  width: 25vw;
  max-width: 20em;
  opacity: 0;
  transition: 1s ease-in-out all;
}
.active-2 .map-illust-2 .i-item1 {
  opacity: 1;
  transform: translate(0 , -6em);
}




/* ------------------------------------------------------- 下層ページ共通 ------------------------------------------------------- */


.page-header {
  position: relative;
  font-size: min(1.36vw , 18px);
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  height: 18em;
  margin-top: 3em;
  z-index: 2;
  background-color: #33C5FF;
}

.page-header h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% ,-20%);
  width: 100%;
  text-align: center;
  font-size: 4.4em;
  font-family: "ab-tombo-bold", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-synthesis: none;
  color: #fff;
  opacity: 0;
  transition: 1s ease all;
}
.page-header.load h2 {
  opacity: 1;
  transform: translate(-50% ,-40%);
}


/* パンくずリスト */

.breadcrumb {
  width: 90%;
  max-width: 1294px;
  margin: 2em auto 1em auto;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5em 2em;
}
.breadcrumb__list li:last-child a {
  color: var(--cocoon-x-pallid-text-color);
  border-bottom: 0;
  pointer-events: none;
}

.breadcrumb__item {
  position: relative;
}
.breadcrumb__item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(1em, -50%);
  width: 1px;
  height: 1em;
  background-color: #33C5FF;
}


.breadcrumb__item:last-child:after {
  display: none;
}

.breadcrumb a {
  color: #33C5FF;
  border-bottom: 1px solid #33C5FF;
}

/* ページ内容 */
.page-contet {
  width: 90%;
  margin: 0 auto;
  padding: 1.5em 0;
  text-align: center;
}

.breadcrumb.sbp-main-before + .content, .breadcrumb.pbp-main-before + .content {
  margin-top: 0;
}

#breadcrumb {
  display: none;
}


/* ------------------------------------------------------- 下層ページ ヘッダーデコ ------------------------------------------------------- */

.page-header-deco {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.deco-in {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.deco-in::after {
  content: "";
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 1em);
  width: 100vw;
  height: 2.4em;
  background: url(images/senro.webp) repeat-x center / contain;
}

.deco {
  position: absolute;
  height: auto;
}

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


/* おでかけTOPIC */
#heder-topice .deco-1 {
  bottom: 0;
  left: 0;
  transform: translate(7em , -4em);
  width: 4.4em;
  aspect-ratio: 10 / 7;
  opacity: 0;
  transition: .5s .5s all ease;
}
#heder-topice.load .deco-1 {
  opacity: 1;
  transform: translate(7em , -5em);
}

#heder-topice .deco-2 {
  width: 3em;
  bottom: 0;
  left: 0;
  transform: translate(12em , -4em);
  aspect-ratio: 10 / 9;
  opacity: 0;
  transition: .5s .6s all ease;
}
#heder-topice.load .deco-2 {
  opacity: 1;
  transform: translate(12em , -5em);
}

#heder-topice .deco-3 {
  width: 2em;
  bottom: 0;
  left: 0;
  transform: translate(16em , -2em);
  aspect-ratio: 3 / 5;
  opacity: 0;
  transition: .5s .7s all ease;
}
#heder-topice.load .deco-3  {
  opacity: 1;
  transform: translate(16em , -3em);
}

#heder-topice .deco-4 {
  width: 2em;
  bottom: 0;
  left: 0;
  transform: translate(18em , -2em);
  aspect-ratio: 9 / 10;
  opacity: 0;
  transition: .5s .8s all ease;
}
#heder-topice.load .deco-4 {
  opacity: 1;
  transform: translate(18em , -3em);
}

#heder-topice .deco-5 {
  width: 7em;
  bottom: 0;
  left: 0;
  transform: translate(3em , -.5em);
  aspect-ratio: 10 / 3;
  gap: .5em;
  opacity: 0;
  transition: .5s .4s all ease;
}
#heder-topice.load .deco-5 {
  opacity: 1;
  transform: translate(3em , -1.5em);
}

#heder-topice .deco-5 img {
  width: calc(100% / 3 - .35em);
}

#heder-topice .deco-6 {
  width: 2em;
  bottom: 0;
  right: 0;
  transform: translate(-12em , -2.5em);
  aspect-ratio: 7 / 10;
  opacity: 0;
  transition: .5s .7s all ease;
}
#heder-topice.load .deco-6 {
  opacity: 1;
  transform: translate(-12em , -3.5em);
}

#heder-topice .deco-7 {
  width: 3em;
  bottom: 0;
  right: 0;
  transform: translate(-8em , -2.5em);
  aspect-ratio: 3 / 5;
  opacity: 0;
  transition: .5s .6s all ease;
}
#heder-topice.load .deco-7 {
  opacity: 1;
  transform: translate(-8em , -3.5em);
}

#heder-topice .deco-8 {
  width: 1.7em;
  bottom: 0;
  right: 0;
  transform: translate(-5em , -.5em);
  aspect-ratio: 9 / 10;
  opacity: 0;
  transition: .5s .5s all ease;
}
#heder-topice.load .deco-8 {
  opacity: 1;
  transform: translate(-5em , -1.5em);

}

#heder-topice .deco-9 {
  width: 2em;
  bottom: 0;
  right: 0;
  transform: translate(-2.5em , -.5em);
  aspect-ratio: 3 / 5;
  opacity: 0;
  transition: .5s .4s all ease;
}
#heder-topice.load .deco-9 {
  opacity: 1;
  transform: translate(-2.5em , -1.5em);
}

#heder-topice .deco-10 {
  width: 10%;
  bottom: -21%;
  left: 30%;
  transform: translateX(-1em) scaleX(-1);
  aspect-ratio: 9.42 / 10;
  z-index: 10;
  opacity: 0;
  transition: .5s .5s all ease;
}
#heder-topice.load .deco-10 {
  opacity: 1;
  transform: translateX(0) scaleX(-1);
}

#heder-topice.heder-topice-post .deco-10 {
  width: 13%;
  bottom: -13%;
  left: 34%;
  aspect-ratio: 5 / 4.26;
  transform: translateX(1em) scaleX(1);
  z-index: 10;
}
#heder-topice.heder-topice-post.load .deco-10 {
  transform: translateX(0) scaleX(1);
}

#slider3 .post-title {
  direction: ltr;
}

/* 記事 */

#heder-article .deco-1 {
  bottom: 0;
  left: 0;
  transform: translate(2em , -4em);
  width: 10em;
  aspect-ratio: 10 / 3.5;
  opacity: 0;
  transition: .5s ease all;
}
#heder-article.load .deco-1 {
  opacity: 1;
  transform: translate(2em , -5em);
}


#heder-article .deco-2 {
  width: 3.7em;
  bottom: 0;
  left: 0;
  transform: translate(15em , -3em);
  aspect-ratio: 10 / 7;
  opacity: 0;
  transition: .5s .2s ease all;
}
#heder-article.load .deco-2 {
  opacity: 1;
  transform: translate(15em , -4em);
}


#heder-article .deco-3 {
  width: 7em;
  bottom: 0;
  left: 0;
  transform: translate(7em , -.5em);
  aspect-ratio: 10 / 2.7;
  gap: .5em;
  opacity: 0;
  transition: .5s .1s ease all;
}
#heder-article.load .deco-3 {
  opacity: 1;
  transform: translate(7em , -1.5em);
}

#heder-article .deco-3 img {
  width: calc(100% / 4 - .4em);
}

#heder-article .deco-4 {
  width: 5.8em;
  bottom: 0;
  right: 0;
  transform: translate(-5em , -5em);
  aspect-ratio: 5 / 2.6;
  opacity: 0;
  transition: .5s .1s ease all;
}
#heder-article.load .deco-4 {
  opacity: 1;
  transform: translate(-5em , -6em);
}

#heder-article .deco-5 {
  width: 8.3em;
  bottom: 0;
  right: 0;
  transform: translate(.5em , -4em);
  aspect-ratio: 2 / 1;
  opacity: 0;
  transition: .5s ease all;
}
#heder-article.load .deco-5 {
  opacity: 1;
  transform: translate(.5em , -5em);
}


#heder-article .deco-6 {
  width: 2em;
  bottom: 0;
  right: 0;
  transform: translate(-7em , -.5em);
  aspect-ratio: 3 / 5;
  opacity: 0;
  transition: .5s .2s ease all;
}
#heder-article.load .deco-6 {
  opacity: 1;
  transform: translate(-7em , -1.5em);
}

#heder-article .deco-7 {
    width: 18%;
    bottom: -40%;
    right: 19%;
    aspect-ratio: 5 / 7;
    z-index: 10;
    opacity: 0;
    transition: .5s .5s ease all;
    transform: translateX(2em);
}
#heder-article.load .deco-7 {
  opacity: 1;
    transform: translateX(0);
}

#heder-article.heder-article-post .deco-7 {
    width: 13%;
    bottom: -23%;
    right: 24%;
    aspect-ratio: 5 / 4.36;
    z-index: 10;
    transform: translateY(1em);
}
#heder-article.heder-article-post.load .deco-7 {
  transform: translateY(0);
}


/* アンケートレポート */
#heder-survey .deco-1 {
  top: 32%;
  left: 13%;
  width: 6.1em;
  aspect-ratio: 10 / 6;
  transform: translate(.5em , 1em) rotate(10deg);
  opacity: 0;
  transition: .5s .1s ease all;
}
#heder-survey.load .deco-1 {
  opacity: 1;
  transform: translate(0 , 0 ) rotate(0);
}

#heder-survey .deco-2 {
  width: 2.16em;
  bottom: 40%;
  left: 10%;
  aspect-ratio: 1 / 1;
  transform: translate(.5em , 70%) rotate(10deg);
  opacity: 0;
  transition: .5s  ease all;
}
#heder-survey.load .deco-2 {
  opacity: 1;
  transform: translate(0 , 50%) rotate(0);
}

#heder-survey .deco-3 {
  width: 4.2em;
  top: 45%;
  right: 10%;
  transform: translate(-.5em , -20%) rotate(-10deg);
  aspect-ratio: 5 / 3;
  opacity: 0;
  transition: .5s  ease all;
}
#heder-survey.load .deco-3 {
  opacity: 1;
  transform: translate(0 , -50%) rotate(0);
}

#heder-survey .deco-4 {
  width: 2.3em;
  top: 30%;
  right: 25%;
  transform: translate(20% , 1em) rotate(0);
  aspect-ratio: 1 / 1;
  opacity: 0;
  transition: .5s .1s ease all;
}
#heder-survey.load .deco-4 {
  opacity: 1;
  transform: translate(50% , 0) rotate(20deg);
}

#heder-survey .deco-5 {
  width: 8%;
  bottom: 30%;
  left: 13%;
  transform: translate(.5em, 100%) rotate(40deg);
  aspect-ratio: 5 / 2;
  opacity: 0;
  transition: .5s .2s ease all;
}
#heder-survey.load .deco-5 {
  opacity: 1;
  transform: translate(0, 50%) rotate(20deg);
}

#heder-survey .deco-6 {
    width: 16%;
    bottom: -22%;
    right: 8%;
    aspect-ratio: 5 / 4;
    z-index: 10;
    opacity: 0;
    transform: translateY(1em);
    transition: .5s .5s ease-in-out all;
}
#heder-survey.load .deco-6 {
  opacity: 1;
  transform: translateY(0);
}


.toc {
  width: 100%;
  padding: 0;
  border: 0;
}

.toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  list-style: none;
  padding: 0;
  border: 0;
}

.toc-content .toc-list a {
  color: #333;
}
.toc-content .toc-list a:hover {
  color: #333;
}

.api-url a:hover {
  color: #fff;
  opacity: .5;
}

.topic-cnt-box .toc li {
  width: 100%;
  max-width: 4.5em;
}

.topic-cnt-box .toc a {
  display: block;
  padding: .2em 0 .2em .5em ;
  background: #33C5FF url(images/arrow-1-w2.webp) no-repeat 85% / .8em;
  color: #fff;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2em;
}

.survey-post-template-default .toc-content {
  display: none;
}




/* ABOUT */

#heder-about .deco-1 {
  bottom: 0;
  left: 0;
  transform: translate(7em , -2em);
  width: 2em;
  aspect-ratio: 3 / 5;
  color: #FFB327;
  opacity: 0;
  transition: .5s all ease;
}
#heder-about.load .deco-1 {
  opacity: 1;
  transform: translate(7em , -3em);
}



#heder-about .deco-2 {
  bottom: 0;
  left: 0;
  transform: translate(11em , -2em);
  width: 2em;
  aspect-ratio: 3 / 5;
  opacity: 0;
  transition: .5s .1s all ease;
}
#heder-about.load .deco-2 {
  opacity: 1;
  transform: translate(11em , -3em);
}

#heder-about .deco-3 {
  bottom: 0;
  left: 0;
  transform: translate(16em , -2em);
  width: 3em;
  aspect-ratio: 3 / 5;
  opacity: 0;
  transition: .5s .2s all ease;
}
#heder-about.load .deco-3 {
  opacity: 1;
  transform: translate(16em , -3em);
}


#heder-about .deco-4 {
  bottom: 0;
  right: 0;
  transform: translate(-20em , -4em);
  width: 2em;
  aspect-ratio: 7 / 10;
  opacity: 0;
  transition: .5s .2s all ease;
}
#heder-about.load .deco-4 {
  opacity: 1;
  transform: translate(-20em , -5em);
}

#heder-about .deco-5 {
  bottom: 0;
  right: 0;
  transform: translate(-7em , -2em);
  width: 6.8em;
  aspect-ratio: 10 / 3;
  gap: .2em;
  opacity: 0;
  transition: .5s .1s all ease;
}
#heder-about .deco-5 img {
  width: calc(100% / 3 - .15em);
}
#heder-about.load .deco-5 {
  opacity: 1;
  transform: translate(-7em , -3em);
}


#heder-about .deco-6 {
  bottom: 0;
  right: 0;
  transform: translate(0 , -7em) scaleX(-1);
  width: 10em;
  aspect-ratio: 10 / 4.4;
  opacity: 0;
  transition: .5s all ease;
}
#heder-about.load .deco-6 {
  opacity: 1;
  transform: translate(0 , -8em) scaleX(-1);
}

#heder-about .deco-7 {
  bottom: -22%;
  left: 28%;
  width: 16%;
  aspect-ratio: 10 / 7;
  z-index: 10;
  opacity: 0;
  transition: .5s .5s all ease;
  transform: translateY(1em);

}
#heder-about.load .deco-7 {
  opacity: 1;
  transform: translateY(0);
}


.page-header .t-box {
  z-index: 3;
}

.page-header .t-box img {
  width: 12%;
  max-width: 210px;
}


/* ------------------------------------------------------- ABOUT ------------------------------------------------------- */

#about {
  position: relative;
}

.about-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50% , 5%);
  width: 100vw;
  height: auto;
  aspect-ratio: 2 / 1;
  background: url(images/about-illust.webp) no-repeat top / 100%;
  opacity: 0;
  transition: 1s ease all;
}
#about.load .about-bg {
  opacity: 1;
  transform: translate(-50% , 0);
}

.about-text {
  position: relative;
  z-index: 1;
  margin-top: 7vw;
}
@media screen and (min-width: 2000px){
  .about-text  {
    margin-top: 8.5vw;
  }

}

#about .about-text .site-logo {
  margin-bottom: 4em;
  opacity: 0;
  transition: 1s .5s ease all;
  transform: translateY(1em);
}

#about.load .about-text .site-logo{
  opacity: 1;
  transform: translateY(0);
}

.about-text .site-logo img {
  display: block;
  margin: 0 auto;
  width: 35vw;
  max-width: 400px;
}


.about-textbox {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 5.5em;
}

.about-textbox p {
  font-weight: 500;
  margin-bottom: 1em;
  line-height: 2.3;
  opacity: 0;
  transform: translateY(1em);
  transition: 1s ease all;
}
.about-textbox p.active-2 {
  opacity: 1;
  transform: translateY(0);
}

.about-btn {
  position: relative;
  width: 60%;
  max-width: 540px;
  margin: 0 auto;
  transition: .2s ease all;
  transform: scale(1);
}
.about-btn:hover {
  transform: scale(1.05);
}

.about-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.about-btn a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}




/* ------------------------------------------------------- おでかけTOPIC ------------------------------------------------------- */

#topic-page .sidebar {
  display: block;
  width: 100%;
}

#topic-page .main-bg-box span {
  background: #E0F6FF url(images/bg/bg_1.webp) repeat center / 15%;
}

#topic-page .main-bg-box::after {
  background: url(images/bg/bg_1_2.webp) repeat-y left / 6%;
}

.topic-post-template-default .main {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw !important;
    background-color: #E0F6FF;
    background: #E0F6FF url(images/bg/bg_4.webp) repeat center / 2.5em;
}

.breadcrumb__list .is-current {
  width: 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-item.topic-post img {
  transform: scale(1);
  transition: .2s ease all;
}
.post-item.topic-post:hover img {
  transform: scale(1.1);
}

.post-item.topic-post:hover .post-text::after {
  animation: arrow 1s infinite;
}

.post-item.topic-post.cat-topic_category_1 {
  border-bottom: #33C5FF solid .5em;
}
.post-item.topic-post.cat-topic_category_2 {
  border-bottom: #9CCF45 solid .5em;
}
.post-item.topic-post.cat-topic_category_3 {
  border-bottom: #FFB327 solid .5em;
}
.post-item.topic-post.cat-topic_category_4 {
  border-bottom: #FFB7D5 solid .5em;
}

#topic-page .post-text {
  height: 52%;
}

.post-category span.cat-topic_category_1 {
  background-color: #E0F6FF;
}

.post-category span.cat-topic_category_2 {
  background-color: #E4F3CA;
}

.post-category span.cat-topic_category_3 {
  background-color: #FFF5C8;
}
.post-category span.cat-topic_category_4 {
  background-color: #FFB7D5;
}


.topic-post-template-default .eye-catch-wrap {
  display: block;
  border-radius: 1em;
  overflow: hidden;
  margin-bottom: 2em;

}

.topic-post-template-default .eye-catch {
  height: 100%;
  margin-bottom: 0;
}

.topic-post-template-default .eye-catch-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.eye-catch .cat-label {
  display: none;
}


/* スライダー */

#topic-slider {
  width: 80%;
  max-width: 1020px;
  margin: 0 auto 2em auto;
  opacity: 0;
  transition: 1s ease all;
}
#topic-slider.active-2 {
  opacity: 1;
}

#topic-slider .post-category {
  justify-content: left;
  font-size: .8em;

}

#topic-slider .post-item {
  aspect-ratio: 9 / 10;
  margin-bottom: 1em;
}

#topic-slider .post-text {
  height: 55%;
}

#topic-slider .splide__arrow--next,
#topic-slider .splide__arrow--prev {
  width: 3.5em;
  height: auto;
  aspect-ratio: 1 / 1;
  opacity: 1;
  top: 50%;
  left: 0;
  transform: translate(-150% ,  -50%) scale(1);
  background: #33C5FF url(images/arrow-4-w1.webp) no-repeat center / 1em;
  transition: .15s ease-in all;
}
#topic-slider .splide__arrow--next:hover {
  transform: translate(-150% ,  -50%) scale(1.1);
}

#topic-slider .splide__arrow--prev {
  left: auto;
  right: 0;
  transform: translate(150% ,  -50%) scale(1);
  background: #33C5FF url(images/arrow-4-w2.webp) no-repeat center / 1em;
}
#topic-slider .splide__arrow--prev:hover {
  transform: translate(150% ,  -50%) scale(1.1);

}

#topic-slider .post-title {
  font-size: .9em;
  line-height: 1.2;
  direction: ltr;
}

.topic-content {
    position: relative;
    width: 90%;
    max-width: 1020px;
    margin: 4em auto 0 auto;
    margin-bottom: 8em;
}


.topic-cnt-box {
  position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 2em;
    background-color: #fff;
    border-radius: 2em;
    margin-bottom: 8em;
}

.topic-body {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  padding: 0 0 2em 0;
}

.topic_illust {
  width: 100%;
  height: 100%;
}

.topic_illust .i-item1 {
  width: 10%;
  left: -24%;
  top: 10%;
}



.topic_illust .i-item2 {
  width: 10%;
  left: -40%;
  top: -3%;
}
.topic_illust .i-item3 {
  width: 10%;
  right: -23%;
  top: 15%;
}
.topic_illust .i-item4 {
  width: 10%;
  right: -6%;
  top: -8%;
}
.topic_illust .i-item5 {
  width: 5%;
  top: 0;
  left: 0;
  transform: translate(-220% , -50%);
}
.topic_illust .i-item6 {
  width: 5%;
  top: 0;
  left: 0;
  transform: translate(-100% , 250%) scale(-1) rotate(-10deg);
  opacity: 0;
  transition: .5s ease-in-out all;
}
.topic_illust .i-item6.active-2 {
  opacity: 1;
  transform: translate(-50% , 200%) scale(-1) rotate(-30deg);
}

.topic_illust .i-item7 {
    width: 3%;
    top: 0;
    right: 0;
    transform: translate(180% , 100%);
    opacity: 0;
    transition: 1.5s ease all;
}
.topic_illust .i-item7.active-2 {
  opacity: 1;
    transform: translate(200% , 50%);
}

.topic_illust .i-item8 {
    width: 3.5%;
    top: 0;
    right: 0;
    transform: translate(-15% , 200%);
    opacity: 0;
    transition: 1s ease all;
}
.topic_illust .i-item8.active-2 {
  opacity: 1;
    transform: translate(-10% , 150%);
}

.topic_illust .i-item9 {
    width: 15%;
    bottom: 0;
    left: 0;
    transform: translate(30% , 20%);
}

.topic_illust .i-item10 {
  position: absolute;
  display: flex;
  gap: .5em;
  width: 8%;
  bottom: 0;
  right: 0;
  transform: translate(-50% , 20%);
}
.topic_illust .i-item10 img {
  position: initial;
  width: calc(100% / 2);
}


/* 一覧イラスト1 */

.topic-body_illust,
.article-body_illust,
.survey-body_illust {
  width: 90%;
  left: 0;
  transform: translate(0);
  max-width: initial;
}

.topic-body_illust .i-item1 {
  bottom: 6%;
  left: 20%;
  width: 2em;
}
.topic-body_illust .i-item2 {
  bottom: 0;
  left: 22%;
  width: 6em;
}
.topic-body_illust .i-item3 {
  bottom: 0;
  left: 45%;
  width: 2em;
}
.topic-body_illust .i-item4 {
  bottom: -1.5%;
  right: 20%;
  width: 4em;
}
.topic-body_illust .i-item5 {
  bottom: -2%;
  right: 13%;
  width: 1.8em;
}
.topic-body_illust .i-item6 {
  display: flex;
  position: absolute;
  gap: .25em;
  bottom: 0;
  right: 3%;
  width: 6em;
}
.topic-body_illust .i-item6 img {
  position: initial;
  width: calc(100% / 3);
}
.topic-body_illust .i-item7 {
  bottom: -1%;
  left: 34%;
  width: 3em;
  transform: scaleX(-1);
}
.topic-body_illust .i-item8 {
  bottom: -7%;
  left: 47%;
  width: 10em;
}
.topic-body_illust .i-item9 {
  bottom: -1.5%;
  right: 26%;
  width: 3em;
}

#topic-page .post-item,
#article .post-item,
#survey .post-item {
  transform: translateY(1em);
  opacity: 0;
  transition: .2s ease-in all;
}

/* 最初の3つは最初から表示 */
#topic-page .post-item:nth-child(-n+3),
#article .post-item:nth-child(-n+3),
#survey .post-item:nth-child(-n+3) {
  opacity: 1;
  transform: translateY(0);
}
@media screen and (max-width: 768px) {

  /* いったんリセット */
  #topic-page .post-item:nth-child(-n+3),
  #article .post-item:nth-child(-n+3),
  #survey .post-item:nth-child(-n+3) {
    opacity: 0;
    transform: translateY(1em);
  }

  /* 1つ目だけ表示 */
  #topic-page .post-item:first-child,
  #article .post-item:first-child,
  #survey .post-item:first-child {
    opacity: 1;
    transform: translateY(0);
  }

}

#topic-page .post-item.active-2,
#article .post-item.active-2,
#survey .post-item.active-2 {
  opacity: 1;
  transform: translateY(0);
}







/* ------------------------------------------------------- 投稿一覧 ------------------------------------------------------- */


#article .sidebar {
  display: block;
  width: 100%;
}
#article #block-6 {
  display: block;
}

#article .flex {
  gap: 3em 1em;
}

#article .post-item {
  position: relative;
  width: calc(100%  / 3 - .7em);
  box-shadow: none;
  overflow: initial;
  background-color: initial;
}
#article .post-item img {
  transition: .2s ease all;
  transform: scale(1);
}
#article .post-item:hover img {
  transform: scale(1.1);
}

#article .post-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(4%);
  width: 100%;
  height: 100%;
  background: url(images/article_post_bg.webp) no-repeat center / contain;
}


#article .post-item.new-post::before {
    content: "";
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    width: 30%;
    height: auto;
    transform: translate(-15% , -25%) rotate(-20deg);
    padding: 0;
    border-radius: 0;
    aspect-ratio: 2 / 1.13;
    background: url(images/article_new.webp) no-repeat center / contain;
}

#article .post-thumbnail {
  border-radius: .5em;
  overflow: hidden;
  width: 90%;
  margin: 0 auto;
}

#article .post-text {
  display: block;
  padding: .5em 0;
  width: 90%;
  margin: 0 auto;
}

#article .post-title {
  display: inline;
  background-color: #fff;
  font-size: 1em;
  padding: .2em .2em;
}

#article .post-date {
  display: block;
  text-align: right;
  width: 90%;
  margin: 0 auto;
}

#article .post-text::after {
  background: url(images/arrow-2w.webp) no-repeat center / contain;
}
#article .post-item:hover .post-text::after {
  animation: arrow 1s infinite;
}

#article .post-category {
  margin-top: 1em;
  font-size: .7em;
  color: #33C5FF;
}
#article .post-category span {
  background-color: #fff;
  color: #33C5FF;
}

/* サイドバー */
#article .widget h2 {
  font-size: 1.38em;
  background: #33C5FF;
  color: #fff;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  margin: 0;
  border-radius: .6vw 0 0 .6vw;
  padding: .2em 1em;
}


#article  #sidebar li a {
  display: block;
  font-weight: 700;
  padding: 10px 0  10px 2em;
  color: #333;
}


/* 一覧イラスト２ */

.article-body_illust .i-item1 {
  bottom: -.5%;
  width: 3.5em;
  left: 10%;
}
.article-body_illust .i-item2 {
    bottom: -.5%;
    width: 1.5em;
    left: 16%;
}
.article-body_illust .i-item3 {
    bottom: -.5%;
    width: 2%;
    left: 16%;
}
.article-body_illust .i-item3 {
    bottom: -.5%;
    width: 10em;
    left: 21%;
}
.article-body_illust .i-item4 {
    bottom: 3%;
    width: 2em;
    left: 25%;
}
.article-body_illust .i-item5 {
    bottom: 0;
    width: 1.5em;
    left: 45%;
}
.article-body_illust .i-item6 {
  bottom: 0;
  width: 1.2em;
  left: 47.5%;
}
.article-body_illust .i-item7 {
    position: absolute;
    display: flex;
    gap: 1em;
    bottom: 0;
    width: 5em;
    left: 57%;
}
.article-body_illust .i-item7 img {
  position: initial;
  width: calc(100% / 2);
}
.article-body_illust .i-item8 {
    bottom: 0;
    width: 1.5em;
    right: 17%;
}
.article-body_illust .i-item9 {
    bottom: 0;
    width: 1.2em;
    right: 15%;
}

.article-body_illust .i-item10 {
    bottom: -.5%;
    width: 1.5em;
    right: 11%;
}
.article-body_illust .i-item11 {
    bottom: -2%;
    width: 5em;
    left: 38%;
}
.article-body_illust .i-item12 {
    bottom: -5%;
    width: 12em;
    right: 27%;
    transform: scaleX(-1);
}

/* 解除ボタン */
.filter-group.deselect {
  background: #fff;
  text-align: center;
  border-radius: .5em;
  border: #33C5FF .15em solid;
  transition: .2s ease all;
}
.filter-group.deselect:hover {
  background: #33C5FF;
}

.filter-group.deselect a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 1em;
  color: #333;
  transition: .2s ease all;

}

.filter-group.deselect:hover a {
  color: #fff;
}






/* ------------------------------------------------------- アンケートレポート ------------------------------------------------------- */

#survey .sidebar {
  display: block;
  width: 100%;
}

#survey .main-bg-box span {
  background: #E4F3CA url(images/bg/bg_3.webp) repeat center / 15%;
}
#survey .main-bg-box::after {
    background: url(images/bg/bg_3_2.webp) repeat-y left / 6%;
}
.survey-body_illust .i-item1 {
    bottom: -1%;
    width: 2em;
    left: 9%;
}
.survey-body_illust .i-item2 {
    bottom: -1%;
    width: 3em;
    left: 12.5%;
}
.survey-body_illust .i-item3 {
    position: absolute;
    display: flex;
    gap: .5em;
    bottom: 0;
    width: 6em;
    left: 28%;
}
.survey-body_illust .i-item3 img {
  position: initial;
  width: calc(100% / 2);
}
.survey-body_illust .i-item4 {
    bottom: -.5%;
    width: 2em;
    left: 35%;
}
.survey-body_illust .i-item5 {
    bottom: 0;
    width: 2.2em;
    right: 28%;
}
.survey-body_illust .i-item6 {
    bottom: 0;
    width: 3em;
    right: 23%;
}
.survey-body_illust .i-item7 {
    bottom: 0;
    width: 1.5em;
    right: 20%;
}
.survey-body_illust .i-item8 {
    bottom: 0;
    width: 6em;
    right: 6%;
}
.survey-body_illust .i-item9 {
    bottom: -1%;
    width: 6em;
    left: 44%;
}

.survey-body_illust .i-item10 {
    bottom: -3%;
    width: 7em;
    right: 30%;
    transform: scaleX(-1);
}






/* ------------------------------------------------------- 投稿 ------------------------------------------------------- */

#archives-2 .widget-sidebar-title::after {
  content: '';
  display: inline-block;
  transform: translateY(20%);
  width: 1em;
  height: auto;
  aspect-ratio: 1 / 1;
  margin-left: .2em;
  background: url(images/archive-icon.webp) no-repeat center/ contain;
}

.post.sec {
  width: 100%;
  max-width: 1920px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 0 10em 0 ;
  margin-top: 8em;
}

.post .sec-in {
  width: 100%;
  max-width: initial;
}

.post-main {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 4em;
  width: 98%;
  margin-left: auto;
  z-index: 1;

}

.main-bg {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50% , -5em);
  width: 100vw;
  height: 100%;
  z-index: -1;
}
.main-bg-box {
  position: relative;
  width: 100%;
  height: 100%;
}

.main-bg-box span {
  display: block;
  width: 90%;
  height: 100%;
  border-radius: 0 20vw 0 0;
  background-color: #FFF5C8;
  background: #FFF5C8 url(images/bg/bg_2.webp) repeat center / 15%;
}

.main-bg-box::after {
  position: absolute;
  content: '';
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1880px;
  height: 100%;
  background: url(images/bg/bg_2_2.webp) repeat-y left / 6%;
}

.post-left {
  width: 80%;
}


.post-item {
  overflow: hidden;
  position: relative;
  width: calc(100% / 3 - 1.35em);
  height: auto;
  aspect-ratio: 1 / 1;
  background-color: #fff;
  border-radius: .5em;
  box-shadow: 6px 6px 10px 0px rgba(51, 51, 51, 0.2);
}
.post-item a {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: .5em;
}



.post-thumbnail {
  width: 100%;
  height: auto;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  background-color: #ccc;
}
.post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1em;
  height: 45%;
}
.post-text::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(-1em , -1em);
  width: 2em;
  height: auto;
  aspect-ratio: 5 / 2;
  background: url(images/arrow-2.webp) no-repeat center / contain;
}

/* 矢印ループ */
#sec01 .flex_cnt.top_post .splide__slide .post-text::after,
#sec02 .flex_cnt.top_post .splide__slide .post-text::after {
  transition: .2s ease all;
  transform: translate(-1em , -1em);
}
#sec01 .flex_cnt.top_post .splide__slide:hover .post-text::after,
#sec02 .flex_cnt.top_post .splide__slide:hover .post-text::after {
    animation: arrow 1.5s ease-in-out infinite;
}
@keyframes arrow {
  0% {
    transform: translate(-1em , -1em);
  }
  50% {
    transform: translate(-.5em , -1em);
  }
  100% {
    transform: translate(-1em , -1em);
  }

}

#sec02 .post-text::after {
    background: url(images/arrow-2o.webp) no-repeat center / contain;
}

.post-title {
  font-weight: 700;
  color: #522519;
  text-align: left;
  font-size: 1em;
  line-height: 1.5;
}

.post-date {
  font-size: .8em;
  letter-spacing: .1em;
  color: #A38D87;
  text-align: left;
}


.post-item.new-post::before {
  content: "NEW";
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 5em;
  height: auto;
  padding: .5em 1em;
  background-color: #FFB327;
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 5.5em 0;
  direction: ltr;
}

/* 0311 */
/* ページネーション */
.pagination {
  margin: 3.8em 0;
  gap: 1em;
}


.page-numbers.dots {
  background-color: initial;
  opacity: 1;
  border: none;
}

.pagination a {
  display: grid;
  align-items: center;
  justify-items: center;
  border: 0;
  border-radius: 50vw;
}

.pagination .current {
  position: relative;
  background-color: initial;
  border: none;
  color: #fff;
}
.pagination .current::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  width: 2em;
  height: 2em;
  border-radius: 50vw;
  background-color: #333;
}

.prev img,
.next img {
  width: 1em;
  height: 1em;
  object-fit: contain;
}

/* カテゴリ */
.entry-categories-tags .tax-icon {
  display: none;
}

.cat-link {
  padding: .4em .5em .4em .5em;
  background-color: #FFD789;
  color: #522519;
  border-radius: 50vw;
  line-height: 1;
  font-size: .85em;
}

.cat-link.cat-link-14 {
  background-color: #E0F6FF;
}
.cat-link.cat-link-15 {
  background-color: #E4F3CA;
}
.cat-link.cat-link-16 {
  background-color: #FFF5C8;
}
.cat-link.cat-link-23 {
  background-color: #FFB7D5;
}

.topic-post-template-default .cat-link {
  pointer-events: none;
}

/* テーブル */

.wp-block-table table:not(.has-border-color) :where(th, td) {
  align-content: center;
  font-size: min(2vw, .9em);
}

.body .wp-block-table table {
  width: 100%;
}

.main figure.wp-block-table {
  margin-bottom: 0;
  margin-top: 1em;
}

/* ------------------------------------------------------- 投稿絞り込み ------------------------------------------------------- */

.post-right {
  width: 17%;
}

.scroll-wrap {
  position: sticky;
  top: 10vw;
  top: max(10vw , 5em);
}

.sidebar {
  background-color: initial;
  border-radius: 1em 0 0 0;
  padding: 0;
}
@media screen and (max-width: 1255px) {
    .sidebar {
      width: auto;
    }

    .entry-card-thumb {
      width: 100%;
    }

  }
.widget_categories ul li a ,
.widget_archive ul li a {
  padding-left: 2em;
}

.filter-group {
  margin-bottom: 1em;
}

.filter-group p {
  font-size: 1.38em;
  background: #33C5FF;
  color: #fff;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  margin: 0;
  border-radius: .6vw .6vw 0 0 ;
  padding: .2em 1em;
  text-align: center;
}

.filter-group select {
  border: 0;
  border-radius: 0 0 .6vw .6vw;
  border: #33C5FF solid .15em;
  background: #fff url(images/arrow-1-b3.webp) no-repeat 90% / 1em;
}

.filter-group select:focus-visible {
  border: #33C5FF solid .15em;
  outline: none;
  box-shadow: none;
}


.filter-status-header h2 {
    text-align: center;
    font-size: 1.2em;
    color: #33C5FF;
}


/* ------------------------------------------------------- 記事内容 ------------------------------------------------------- */



.article-content {
  position: relative;
  width: 90%;
  max-width: 1020px;
  margin: 4em auto 0 auto;
  background-color: #fff;
  border-radius: 2em;
  padding: 2em 0;
  margin-bottom: 2em;
}

.article-content::before {
  pointer-events: none;
  content: '';
  position: absolute;
  width: 120%;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background:
    url(images/article-post_deco1.webp) left top / 10% auto repeat-y,
    url(images/article-post_deco2.webp) right top / 10% auto repeat-y;
}


.article-cnt-box {
  width: 80%;
  margin: 0 auto;
}

.article-date {
  color: #8D8D8D;
  text-align: right;
}

.article-body {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 3em 0;
}


/* 目次 */
.toc-content {
  background-color: #FFF7E9;
  border: none;
  width: 100%;
  border-radius: 1em;
  padding: 1em 1.6em 2em 1.6em;
  margin-top: 2em;
}

.topic-cnt-box .toc-center {
  display: none;
}

.toc-title {
  font-weight: 700;
  color: #FFB427;
}

.toc-list li {
  color: #333;
  padding-left: 1em;
  border-bottom: #FFB327 dashed .15em;
}

.toc-list > li {
  counter-increment: toc-number;
}
.toc-list > li > a::before {
  content: counter(toc-number, decimal-leading-zero) " ";
  font-weight: bold;
  font-size: 1.2em;
  color: #FFB327;
}

.article-item {
  padding: .5em 0;
}
.article-item:first-child {
  padding: 0 0 .5em 0;
}

.article-item:last-child {
  padding: .5em 0 0 0;
}

.article-post-template-default .main {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw !important;
  background: #FFF7E9 url(images/bg/bg_4.webp) repeat center / 2.5em;
}

.post-category {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  font-size: .85em;
}

.post-category span {
  padding: .38em .5em .4em .5em;
  background-color: #FFD789;
  color: #522519;
  border-radius: 50vw;
  line-height: 1;
}


.article-post-template-default .under-entry-content {
  display: none;
}


.cat-label {
  display: none;
}

.archive-title span {
  display: none
}

.archive-title {
  font-size: 2em;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0;
  color: #33C5FF;
}

.article-deco {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  height: 100%;
}

.article-deco-in {
  position: relative;
  width: 100%;
  height: 100%;
}

.article-deco-in::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(60%, -60%);
  width: 65%;
  height: auto;
  aspect-ratio: 10 / 7;
  background: url(images/article_post-bg2_1.webp) no-repeat center / contain;
}

.article-deco-in::after {
  content: '';
  position: absolute;
    bottom: 0;
    left: -34%;
    transform: translateY(73%);
    width: 98%;
  height: auto;
  aspect-ratio: 5 / 3;
  background: url(images/article_post-bg2_2.webp) no-repeat center / contain;
}

.single-article-post.no-sidebar .content .main {
  padding-bottom: 8em;
}


/* ------------------------------------------------------- アンケートレポート ------------------------------------------------------- */



#survey .post-item {
  aspect-ratio: 4.25 / 5;
  transition: .2s ease-in all;
  transform: scale(1);
}
#survey .post-item:hover {
  transform: scale(1.05);
}
.post-item .post-deco {
  display: grid;
  align-items: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50% , 0);
  width: 80%;
  aspect-ratio: 5 / 1.8;
  background: url(images/survey_deco.webp) no-repeat center / contain;
  text-align: center;
}
.post-deco p {
  color: #fff;
  font-weight: 700;
  font-size: .77em;
  margin-bottom: 3.5em;
}

#survey .post-text,
#sec06 .post-text {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  height: 100%;
  width: 100%;
}

.post-text_in {
  position: relative;
  width: 100%;
  height: 100%;
}

#survey .post-text::after,
#sec06 .post-text::after {
  display: none;
}

#survey .post-title,
#sec06 .post-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  width: 90%;
  margin-bottom: 1em;
  font-size: 1.1em;
  text-align: center;
  direction: ltr;
}

#survey .post-btn,
#sec06 .post-btn {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50% , -2em);
  width: 9em;
  margin: 0 auto;
  padding: .5em 0;
  background: #33C5FF url(images/arrow-1-w.webp) no-repeat 90% / .5em;
  text-align: center;
  border-radius: 50vw;
}

#survey .post-btn p,
#sec06 .post-btn p {
  font-size: .77em;
  font-weight: 700;
  color: #fff;
}

.post-date, .post-update, .post-author, .amp-back {
  margin-right: 0;
}

.post-update {
  display: none;
}


#survey .post-date-wrap,
#sec06 .post-date-wrap {
  position: absolute;
  bottom: 0;
  transform: translateY(-.2em);
  width: calc(100% - 1em);
  height: 20%;
  border: #33C5FF solid .2em;
  border-top: 0;
  margin: .5em;
  border-radius: 0 0 1.1em 1.1em;
}

#survey .post-date-wrap .post-date,
#sec06 .post-date-wrap .post-date {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(3em , 1em);
  margin-top: auto;
  background-color: #fff;
  color: #33C5FF;
  padding: 0 1em ;
}


.survey-content {
    position: relative;
    width: 90%;
    max-width: 1020px;
    margin: 4em auto 0 auto;
    margin-bottom: 8em;
}


.btn-3 a {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.btn-3 {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 850px;
  overflow: hidden;
  height: auto;
  aspect-ratio: 5 / 1;
  border-radius: 1.1em;
  border: #33C5FF solid .2em;
  margin-bottom: 4em;
}
.btn-3 .flex {
  flex-wrap: nowrap;
  gap: 1em;
  height: 100%;
}

.btn-3 .cnt1 {
  position: relative;
  width: 30%;
}
.btn-3 .cnt1 img {
  position: absolute;
  transform: translateY(2%) scaleX(-1);
}

.btn-3 .cnt2 {
  text-align: center;
  width: 70%;
  align-content: center;
  background-color: #33C5FF;
  background: #33C5FF url(images/arrow-1-w.webp) no-repeat 95% / .6em;
}

.btn-3 p {
  font-size: 1.2em;
  font-weight: 700;
  color: #fff;
  padding-left: 1em;
}

.btn-3 p.survey-btn{
  margin-top: 0;
}

.survey-content .nav-links {
  display: flex;
  justify-content: space-between;
  max-width: 850px;
  margin: 0 auto;
}

.survey-content .nav-previous,
.survey-content .nav-next {
  position: relative;
  width: 50%;
  max-width: 380px;
  height: auto;
  aspect-ratio: 10 / 3;
  border-radius: 1.1em;
  border: #33C5FF solid .2em;
  background: #fff url(images/arrow-1-b.webp) no-repeat 95% / .5em;
}

.survey-content .nav-previous{
  background: #fff url(images/arrow-1-b2.webp) no-repeat 5% / .5em;
}

.survey-content .nav-previous span.prev,
.survey-content .nav-next span.next {
  position: absolute;
  top: 0;
  left: 0;
  font-size: .8em;
  margin-left: 1em;
  color: #33C5FF;
}

.survey-content .nav-previous span.title,
.survey-content .nav-next span.title {
  align-content: center;
  display: block;
  width: 100%;
  height: 100%;
  font-size: 1.2em;
  padding: 1em;
  text-align: center;
  color: #33C5FF;
  max-width: 14em;
  margin: 0 auto;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

}


.survey-content .nav-previous a ,
.survey-content .nav-next a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}

/* ボックスのデフォルト色変更 */
.single .blank-box {
  --cocoon-custom-border-color: #33C5FF;
    border-color: #33C5FF;
    margin-bottom: 0;
    margin-top: 3em;
}


.single .blank-box.wp-block-cocoon-blocks-blank-box-1 {
  margin-top: 1em;
}

.caption-box {
  --cocoon-custom-border-color: #33C5FF;
    margin-bottom: 0;
    margin-top: 1em;

}

.blank-box.sticky {
    border-color: #33C5FF;
    background-color: #E0F6FF;
    margin-bottom: 0;
    margin-top: 1em;
}

.cocoon-block-label-box.not-nested-style>.box-content {
    border-color: #33C5FF;
    color: #33C5FF;
    margin-bottom: 0;
    margin-top: 1em;
}

.cocoon-block-caption-box.not-nested-style {
  margin-bottom: 0;
}

.cocoon-block-caption-box.not-nested-style>.box-label {
  color: #fff;
}

/* ------------------------------------------------------- キッズコンテンツ ------------------------------------------------------- */
#heder-kids .deco-1 {
  bottom: 0;
  left: 0;
  transform: translate(-10% , -200%);
  width: 5.5em;
  gap: 1em;
  opacity: 0;
  transition: .5s .5s all ease;
}
#heder-kids .deco-1 img {
  width: calc(100% / 2 - .5em );
}
#heder-kids.load .deco-1 {
  opacity: 1;
  transform: translate(-10% , -220%);
}

#heder-kids .deco-2 {
  width: 5em;
  bottom: 0;
  left: 0;
  transform: translate(100%, -80%);
  aspect-ratio: 10 / 5.7;
  opacity: 0;
  transition: .5s .6s all ease;
}
#heder-kids.load .deco-2 {
  opacity: 1;
  transform: translate(100%, -100%);
}

#heder-kids .deco-3 {
  width: 4em;
  bottom: 0;
  left: 0;
  transform: translate(350% , -80%);
  aspect-ratio: 10 / 5.9;
  opacity: 0;
  transition: .5s .7s all ease;
}
#heder-kids.load .deco-3  {
  opacity: 1;
  transform: translate(350% , -100%);
}

#heder-kids .deco-4 {
  width: 3em;
  top: 0;
  left: 50%;
  transform: translate(-750% , 150%);
  aspect-ratio: 10 / 9.7;
  opacity: 0;
  transition: .5s .8s all ease;
}
#heder-kids.load .deco-4 {
  opacity: 1;
  transform: translate(-750% , 130%);
}

#heder-kids .deco-5 {
  width: 2.5em;
  top: 0;
  right: 0;
  transform: translate(-550% , 270%);
  aspect-ratio: 10 / 8.47;
  gap: .5em;
  opacity: 0;
  transition: .5s .4s all ease;
}
#heder-kids.load .deco-5 {
  opacity: 1;
  transform: translate(-550% , 250%);
}


#heder-kids .deco-6 {
  width: 5em;
  bottom: 0;
  right: 0;
  transform: translate(-250% , -50%);
  aspect-ratio: 10 / 6.38;
  opacity: 0;
  transition: .5s .7s all ease;
}
#heder-kids.load .deco-6 {
  opacity: 1;
  transform: translate(-250% , -70%);
}

#heder-kids .deco-7 {
  width: 3em;
  bottom: 0;
  right: 0;
  transform: translate(-280% , -110%);
  /* aspect-ratio: 3 / 5; */
  opacity: 0;
  transition: .5s .6s all ease;
  gap: .5em;
}
#heder-kids .deco-7 img {
  width: calc(100% / 2 - .25em);
}
#heder-kids.load .deco-7 {
  opacity: 1;
  transform: translate(-280% , -130%);
}

#heder-kids .deco-8 {
  width: 1.5em;
  bottom: 0;
  right: 0;
  transform: translate(-250% , -20%);
  aspect-ratio: 3 / 10;
  opacity: 0;
  transition: .5s .5s all ease;
}
#heder-kids.load .deco-8 {
  opacity: 1;
  transform: translate(-250% , -40%);

}

#heder-kids .deco-9 {
  z-index: 10;
  width: 12%;
  max-width: 120px;
  bottom: 0;
  right: 0;
  transform: translate(-250%, 40%);
  aspect-ratio: 10 / 9.38;
  opacity: 0;
  transition: .5s .5s all ease;
}
#heder-kids.load .deco-9 {
  opacity: 1;
  transform: translate(-250%, 20%);
}


@media screen and (max-width: 768px){
  /* ヘッダー */

  .hidden {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;

  }

  .header-container-in.hlt-top-menu .logo-header img {
    height: 49.5px;
  }

  .header {
    font-size: min(4.37vw, 16px);
  }
  #header-container {
    border-radius: 0 0 1em 1em;
    height: 55px;
  }

  #header-container .wrap {
    width: 100%;
    height: 100%;
    padding-bottom: 0;
    background-color: #fff;
  }

  .header-flex {
    height: 100%;
    width: 100%;
  }

  .header-container-in.hlt-top-menu .logo-header {
    padding: 0;
    height: 90%;
    width: auto;
    margin: 5% 0 5% 10px;
  }
  .header-container-in.hlt-top-menu .logo-header .site-name {
    height: 100%;
  }

  /* ハンバーガーメニュー */

  .header-sp {
    height: 100%;
    display: flex;
  }

  .page-id-7 .header-category,
  .page-id-36 .header-category,
  .single-topic-post .header-category,
  .single-article-post .header-category,
  .single-survey-post .header-category {
    display: none;
  }

  .header-category {
    position: relative;
    height: 100%;
    aspect-ratio: 1 / 1;
    background-color: #FFB427;
  }

  .header-category .fa-search {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    align-content: center;
  }
  #category-sp {
    transform: translateX(100%);
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    width: 80%;
    height: 97%;
    border-radius: 0 0 0 40vw;
    background-color: #fff;
    transition: .2s ease;
  }
  #category-sp.active {
    transform: translateX(0);
  }

 .no-sidebar #category-sp .sidebar {
    display: block;
    padding: 0 1em;
    align-content: center;
  }

  #category-sp #sidebar-scroll {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
  }

  .page-id-10 .filter-group1,
  .page-id-14 .filter-group1 {
    display: none;
  }

  .category_close {
    position: absolute;
    top: 55px;
    left: 0;
    transform: translate(50% , 50%);;
    width: 15%;
    max-width: 50px;
    height: auto;
    aspect-ratio: 1 /  1;
    background: url(images/close-2.webp) no-repeat center / contain;
  }



  .header-2 {
    position: relative;
    height: 100%;
    width: 55px;
    aspect-ratio: 1 / 1;
    background-color: #33C5FF;
  }



  .hamburger {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 50%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .hamburger span {
    position: absolute;
    display: block;
    height: .3em;
    width: 100%;
    background-color: #fff;
    box-sizing: unset;
    opacity: 1;
    border-radius: 50vw;
    transition: .2s ease-in;
  }
  .hamburger span:nth-child(1) {
    top: 0;
    transform: translate(0 , 0) rotate(0);
  }

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

  .hamburger span:nth-child(3) {
    bottom: 0;
    transform: translate(0 , 0) rotate(0);
  }

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

  .header-2.active .hamburger span:nth-child(2) {
    opacity: 0;
  }

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


  .header-nav .header-menu  {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 80%;
    max-width: 650px;
    height: auto;
    aspect-ratio: 9 / 10;
    background-color: #fff;
    border-radius: 1.5em;
    flex-direction: column;
    gap: 0;
    font-size: min(3vw , 1.5em);
    justify-content: center;
  }
  .header-nav {
    display: none;
    transition: .2s ease;
  }
  .header-nav.active {
    display: block;
  }



  .header-nav li::after {
    display: none;
  }

  .header-nav li {
    width: 70%;
    margin: 0 auto;
    border-bottom: .2em dashed #FFB327;
    height: auto;
    border-right: 0;
  }
  .header-nav li a .h_br {
    display: none;
  }

  #nav-deco {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 80%;
    max-width: 780px;
    height: auto;
    aspect-ratio: 9 / 10;
  }
  #nav-deco.active {
    display: block;
  }

  #nav-deco .i-item1 {
    right: 0;
    top: 0;
    transform: translate(120% , 50%) rotate(3deg);
    width: 10%;
  }
  #nav-deco .i-item2 {
    right: 0;
    top: 0;
    transform: translate(-35% , 120%) rotate(3deg);
    width: 7%;
  }
  #nav-deco .i-item3 {
    left: 0;
    top: 0;
    transform: translate(-2em , -55%) rotate(-2deg);
    width: 10em;
  }

  #nav-deco .i-item4,
  #nav-deco .i-item5,
  #nav-deco .i-item6 {
    right: 0;
    bottom: 0;
    width: 2em;
  }

  #nav-deco .i-item4 {
    transform: translate(-1em ,-2.4em);
  }
  #nav-deco .i-item5 {
    transform: translate(-3.2em ,-2.4em);
  }
  #nav-deco .i-item6 {
    transform: translate(-5.5em ,-2.4em);
  }

  .nav-sen {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50% , 1em);
    width: 100vw;
    height: 3em;
    background: url(images/senro.webp) repeat-x center/ contain ;
  }
  .illust_in .nav-sen img {
    width: min(30vw , 200px);
    transform: translate( -250% , -20%);
    animation: map_train 2s linear forwards;
  }

  .illust_in .nav-sen img:nth-of-type(2) {
    animation: map_train 2s 0.3s linear forwards;
  }

  @keyframes map_train {
  0% {
    transform: translate( -250% , -20%);
  }
  100% {
    transform: translate(110vw , -20%);
  }
}


  #nav-bg,
  #nav-bg2 {
    display: none;
    opacity: .7;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
    transform: translate(-50% , 0);
    width: 100vw;
    height: 100vh;
    background-color: #000;
  }

  #nav-bg.active,
  #nav-bg2.active {
    display: block;
  }

  #nav-bg2 {
    z-index: -2;
  }

  .club {
      transform: translate(-30%, -1em);
  }
  .club:hover {
      transform: translate(-30%, 0em);
  }

    .header-nav.active .header-menu{
    animation: spmenu 0.3s ease 0.5s forwards;
  }

  @keyframes spmenu {
    0%   { transform: translate(-50%, -30%); opacity: 0;}
    100% { transform: translate(-50%, -50%); opacity: 1;}
  }





}















/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  main.main, div.sidebar {
    margin: 0;
  }

}

/*834px以下*/
@media screen and (max-width: 834px){
      #header .site-name-text {
        font-size: 0;
    }

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

@media screen and (max-width: 480px){
      #header .site-name-text {
      font-size: 0;
    }

    .entry-title, .article h2 {
      padding: 0;
    }

    .page-numbers.dots {
      display: block;
    }

}

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




  /* 共通 */
  .pc {
    display: none;
  }

  .flex.pc {
    display: none;
  }

  .sp {
    display: block;
  }

  .btn-1 {
    background: #33C5FF url(images/arrow-1-w.webp) no-repeat 90% / .5em;
  }
  .single-article-post .btn-1 {
  background: #fff url(images/arrow-1-b.webp) no-repeat 90% / .5em;
  }

  .btn-1 p {
    color: #fff;
    font-weight: 700;
  }

  .single-article-post .btn-1 p {
    color: #33C5FF;
  }

  #sec01 .btn-1, #sec02 .btn-1 {
    background: #33C5FF url(images/arrow-1-w.webp) no-repeat 90% / .5em;
    margin: 0 auto 0 auto;
    border: 0;
    border: .16em solid #33C5FF;

  }
  #sec01 .btn-1:hover,
  #sec02 .btn-1:hover {
    transform: scale(1);
    background: #33C5FF url(images/arrow-1-w.webp) no-repeat 90% / .5em;
    border: .16em solid #33C5FF;
  }

  .btn-1:hover {
    transform: scale(1);
}


  .sec {
    padding: 4em 0;
    font-size: min(4.37vw , 18px);
  }

  .sec h2 {
    font-size: 1.5em;
  }

  #sec06 h2 {
    font-size: min(7.5vw , 2.5em);
  }

  .train_f_sen {
    display: none;
  }

  .go-to-top {
    right: 15px;
    bottom: 14vw;
  }



  /* FV */
  .fv {
    overflow: hidden;
    aspect-ratio: 6.5 / 9;
    font-size: min(4vw, 20px);
    margin-top: 25px;
    min-height: calc(4em + 100vw);
  }

  #slider1 .splide__track {
    width: 86%;
    padding: 0 2%;
  }

  #slider1 .splide__slide .slide_inner {
    border: 1.5vw solid #33C5FF;
    transform: translate(-50%, -50%) scale(1);
    border-radius: 1em;
  }

  #slider1 .splide__slide.is-active .slide_inner {
    border: 1.5vw solid #33C5FF;
  }

  #fv .splide__arrows {
    left: 0;
    transform: translate(5vw, 25vw);
    width: 21vw;
  }

  #fv .splide__arrow {
    width: 9vw;
    background: #33C5FF url(images/arrow-4-w2.webp) no-repeat center / 1em;
  }
  #fv .splide__arrow.splide__arrow--prev {
    background: #33C5FF url(images/arrow-4-w1.webp) no-repeat center / 1em;
    }

  .fv .splide__pagination {
    width: 85%;
    justify-content: center;
    transform: translate(-50% , -31%);
  }

  .top_banner_text .slide_text p.slide_date{
    font-size: min(3.125vw,14px);
  }

  .top_banner_text .slide_text p{
    font-size: min(3.4375vw,16px);
  }



  /* fv_電車 */

  .fv_sen,
  .fv_sen2 {
    aspect-ratio: 6.5 / 10;
    font-size: min(4.37vw , 16px);
    max-height: 85vh;
    min-height: calc(12em + 115vw);
  }

  .sen-in {
    width: 130%;
    font-size: min(4.37vw , 16px);
  }

  .fv_sen2 {
    font-size: min(4.37vw , 16px);

  }

  .fv_sen .sen-in {
    position: relative;
    width: 120%;
    max-width: 800px;
    aspect-ratio: 10 / 9;
  }
  .fv_sen .sen-in::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 7%;
    background: url(images/senro.webp) repeat-x top / 65%;
  }
    .fv_sen .sen-in::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 7%;
    transform: translateX(0);
    background: url(images/senro.webp) repeat-x bottom / 65%;
  }
  .i-item-t {
    position: absolute;
    top: -3%;
    left: 0;
    width: 22%;
    z-index: 2;
    animation: fv_train 10s linear infinite;
  }

  .i-item-t.t-2 {
    animation: fv_train 10s 1.2s linear infinite;
  }

  @keyframes  fv_train {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(120vw);
    }
    100% {
      transform: translateX(120vw);
    }

  }
  .i-item-t2{
    position: absolute;
    bottom: 1%;
    right: 0;
    width: 22%;
    z-index: 2;
    transform: translateX(100%);
    animation: fv_train2 10s 7s linear infinite;
  }
  .i-item-t2.t-4 {
    bottom: 1%;
    animation: fv_train2 10s 8s linear infinite;
  }

  @keyframes  fv_train2 {
    0% {
      transform: translateX(100%);
    }
    50% {
      transform: translateX(-120vw);
    }
    100% {
      transform: translateX(-120vw);
    }

  }


  .fv_sen2 .sen-in {
    width: 185%;
    transform: translate(-30% , -80%);
  }

  .train {
    width: 10em;
    width: 15%;
    animation: train_invert2 15s linear infinite ;
  }
  .train.train2 {
    animation: train_invert2 15s 1.1s linear infinite ;
  }

  @keyframes train_invert2 {
    0% {
        transform: translateY(0) scaleY(1);
        opacity: 0;
    }
    5% {
      opacity: 1;
    }
    39% {
        transform: translateY(-1.5em) scaleY(1);
    }
    40% {
        transform: translateY(-1.5em) scaleY(-1);
    }
    98% {
      opacity: 1;
    }
    100% {
        transform: translateY(-1.5em) scaleY(-1);
        opacity: 0;
    }
  }

  #route-path {
    display: none;
  }

  #route-path2 {
    display: block;
  }

  /* 線路太さ */
  #route-path2 .r-cls-1 {
  stroke-width: 3%;
  }

  #route-path2 .r-cls-2 {
    stroke-width: 2.5%;
    stroke: #fff;
  }
  #route-path2 .r-cls-3 {
    stroke-width: 4.5%;
    stroke-dasharray: .3% 3%;
  }

  .fv_sen2 .cls-1 {
  stroke-width: 3.5%;
  }
  .fv_sen2 .cls-2 {
    stroke-width: 2.5%;
  }

  .fv_sen2 .cls-3 {
    stroke-width: 4.5%;
    stroke-dasharray: .5% 2.2%;

  }

  #sen2_svg {
  display: none;
  }
  #sen2_svg_sp {
    display: block;
    bottom: 0;
    top: auto;
    transform: translate(0 , 25%);
  }


  /* fv_イラスト */
  .fv_illust_1, .fv_illust_2 {
    width: 100%;
    height: 100%;

  }
  .fv_illust_1 .i-item1,
  .fv_illust_1 .i-item2,
  .fv_illust_1 .i-item6,
   .fv_illust_1 .i-item2,
   .fv_illust_2 .i-item1 {
    display: none;
  }

  .fv_illust_1 .i-item3 {
    transform: translate(-50% , 100%);
    width: 9%;
  }

  .fv_illust_1 .i-item4 {
   transform: translate(-160% , 100%);
   width: 9%;
  }
  .fv_illust_1 .i-item5 {
   transform: translate(-265% , 100%);
   width: 9%;

  }

  .fv_illust_1 .i-item7 {
    top: 22.5%;
    left: 60%;
    transform: translate(0, 0);
    width: 7%;
  }

  .fv_illust_1 .i-item8 {
    top: 20.5%;
    left: 50%;
    transform: translate(0, 0);
    width: 8%;
  }

  .fv_illust_1 .i-item9 {
    top: 6%;
    left: 42%;
    transform: translate(0, 0);
    width: 5%;
  }

  .fv_illust_1 .i-item10 {
    top: 7%;
    left: 49%;
    transform: translate(0, 0);
    width: 4.5%;
  }

  .illust-wrap.fv_illust_2 {
    max-height: initial;
  }

  .fv_illust_2 .i-item2 {
    transform: translate(50%, -5%);
    width: 55%;
  }
  .load .fv_illust_2 .i-item2 {
    transform: translate(5%, -5%);
  }

  .fv_illust_2 .i-item3 {
    transform: translate(-8%, 0);
    bottom: auto;
    top: 10%;
    width: 44%;
    opacity: 1;
  }
  .load .fv_illust_2 .i-item3 {
    transform: translate(-8%, 0);
  }

  /* おでかけTOPIC */

  .topic-post-template-default #footer {
    padding: 0;
  }


  #topic-page.sec {
    font-size: 4.37vw;
  }

  #topic-page .sec-in {
    position: relative;
    background: #E0F6FF url(images/bg/bg_1.webp) repeat center / 40%;


  }


  #topic-page .flex {
    flex-direction: column;
  }

  #topic-page .post-item {
    width: 100%;
  }


  #topic-page .post-text {
    padding: .5em;
  }

  .topic-content {
    padding-bottom: 4em;
    margin-bottom: 4em;
  }

  .topic-body {
    padding: 1em 1em 4em 1em;
  }

  .topic-body_illust ,
  .article-body_illust,
  .survey-body_illust  {
    width: 100%;
  }

  .topic-body_illust .i-item1 {
    bottom: 2%;
    left: 12%;
    width: 10%;
}
.topic-body_illust .i-item2 {
    left: 2%;
    width: 18%;
}
.topic-body_illust .i-item4 {
    bottom: -0.5%;
    right: 16%;
    width: 13%;
}
.topic-body_illust .i-item5 {
    bottom: 0;
    right: 4%;
    width: 6%;
}
.topic-body_illust .i-item6 {
    right: auto;
    width: 20%;
    left: 36%;
}

.topic-body_illust .i-item6 img {
  width: calc(100% / 2);
}

.topic-body_illust .i-item7 {
    bottom: -.5%;
    left: 20%;
    width: 12%;
}

.topic-body_illust .i-item8 {
    bottom: -2%;
    left: 50%;
    width: 30%;
    transform: translateX(-49%);
}
.topic-body_illust .i-item9 {
    bottom: -1.2%;
    right: 5%;
    width: 10%;
}



  .sec01_l-train {
    overflow: hidden;
    padding-top: 7vw;
    padding-bottom: 7vw;
  }

  .splide__pagination__page {
    height: .6em;
    width: .6em;
  }

  .splide__pagination__page.is-active {
    transform: scale(1.5);
  }


  #topic {
    font-size: min(4.37vw, 18px);
  }

  #sec01, #sec02 {
      font-size: min(4.37vw, 18px);
      font-size: 4.37vw;
      text-align: center;
  }

  #sec01 {
    padding: 0 0 4em 0;
    width: 90%;
  }


  #sec01 .sec_in, #sec02 .sec_in {
    width: 100%;
    text-align: right;
  }

  #sec01 .flex_cnt.text::after, #sec02 .flex_cnt.text::after {
    display: none;
  }

  #sec01::after, #sec02::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    transform: translate(0, 0);
    background: #33C5FF url(images/top-topic_bg_sp.webp) no-repeat center / contain;
    width: 120vw;
    max-width: 800px;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
  }

  .topic_box {
    position: initial;
  }

  #sec01 .flex {
    gap: 0;
    flex-direction: column;
  }

  #sec01 .flex_cnt.top_post .splide {
    position: initial;
    width: 100%;
    margin: 0 auto;
  }

  #sec01 .flex_cnt.text, #sec02 .flex_cnt.text {
    width: 100%;
    max-width: initial;
  }

  #sec01 .topic_text_sp {
    width: 100%;
  }

  #sec01.sec2 {
    line-height: 1.2;
    margin-top: 1em;
    font-size: 9.5vw;
    text-align: center;
    display: inline-block;
    opacity: 0;
    transform: translateY(1em);
    transition: 1s ease all;
  }
  #sec01.sec.active h2 {
    opacity: 1;
    transform: translateY(0);
    font-size: 9.5vw;
  }

  #sec01.sec h2 {
    padding-top: 1em;
    margin-right: 0.5em;
    font-size: 9.5vw;
    line-height: 1.5;
  }
  #sec01.sec h2 span {
    display: inline-block;
  }

  #sec01 .flex_cnt.top_post, #sec02 .flex_cnt.top_post {
    width: 100%;
    padding: 0 5%;
    margin: 0 auto;
  }


  #sec01 .flex_cnt.top_post .splide__slide,
  #sec02 .flex_cnt.top_post .splide__slide {
    margin: 0;
  }

  #sec01 .splide__arrows, #sec02 .splide__arrows {
    width: 98vw;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);
    z-index: -1;
  }

  #sec01 .splide__arrow.splide__arrow--prev,
  #sec02 .splide__arrow.splide__arrow--prev,
  #sec04 .splide__arrow {
    left: 0;
    background: #AAAAAA url(images/arrow-4-w1.webp) no-repeat center / 57%;
  }
  #sec01 .splide__arrow:hover, #sec02 .splide__arrow:hover, #sec04 .splide__arrow:hover, #sec04 .splide__arrow.splide__arrow--next:hover {
    transform: translateY(-50%) scale(1);
  }

  #sec01 .flex_cnt.top_post .splide__slide:hover img, #sec02 .flex_cnt.top_post .splide__slide:hover img {
    transform: scale(1);
  }
  #sec01 .flex_cnt.top_post .splide__slide:hover .post-text::after, #sec02 .flex_cnt.top_post .splide__slide:hover .post-text::after {
    animation: none;
  }

  .splide__pagination__page:hover {
    transform: scale(1);
  }

  #sec02 .splide__arrow.splide__arrow--prev{
    width: 7vw;
  }

  #sec01 .splide__arrow,
  #sec02 .splide__arrow.splide__arrow--next,
  #sec04 .splide__arrow.splide__arrow--next{
    background: #AAAAAA url(images/arrow-4-w2.webp) no-repeat center / 57%;
    width: 7vw;
  }

  #sec04 .splide__slide:hover {
    transform: scale(1);
  }

  #sec02 .splide__arrow.splide__arrow--next{
    right: 0;
    left: auto;
  }


  #sec01 .splide__pagination {
    bottom: .5em;
    transform: translate(0, 8vw);
    width: 100%;
  }

  #sec02 .splide__pagination{
    right: 50%;
    transform: translate(50%,8vw);
  }

  #sec01 .splide__track--draggable,
  #sec02 .splide__track--draggable{
    padding-bottom: 5vw;
    margin-bottom: 10vw;
  }

  /* イラスト */
  .illust-wrap.topic_illust_1_sp,
   .illust-wrap.sec02_illust_sp {
    top: 0;
    left: 0;
    transform: translate(0 , 0);
    width: 120vw;
    max-width: 800px;
    border-radius: 50vw;
    height: auto;
    aspect-ratio: 1 / 1;
    z-index: 5;
    font-size: min(3.2vw , 18px);
  }

  .illust-wrap.sec02_illust_sp {
    left: auto;
    right: 5%;
  }


  .topic_illust_1_sp .i-item1 {
    top: -2%;
    left: 5%;
    transform: translateX(-2em) scaleX(-1);
    z-index: 1;
    width: 28%;
    opacity: 0;
    transition: .5s ease all;
  }

  .topic_illust_1_sp.active .i-item1 {
    opacity: 1;
    transform: translateX(0) scaleX(-1);
  }


  .topic_illust_1_sp .i-item2 {
    top: -2%;
    left: 62%;
    width: 5.5%;
  }
   .topic_illust_1_sp .i-item3 {
    top: 0;
    left: 68%;
    width: 4%;
  }
  .topic_illust_1_sp .i-item4 {
    top: -4%;
    left: 28%;
    width: 9%;
  }

  .topic_illust_1_sp .i-item5 {
    top: -6%;
    left: 39%;
    width: 5%;
  }

   /* 新着記事 */

   #sec02 {
    padding: 0 0;
    margin-top: 3vw;
  }

  #sec02 .sec_in {
    width: 90%;
    padding-top: 0;
  }


   #sec02::after {
    left: auto;
    right: 5%;
    background: #FFB327 url(images/top-article_bg_sp.webp) no-repeat center / contain;
   }

   #sec02.sec h2 {
    text-align: left;
    padding-top: 1em;
    margin-left: 0.5em;
    font-size: 9.5vw;
   }

   #sec01 .flex_cnt.text p {
    width: auto;
    text-align: center;
    font-size: 4.3vw;
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: 1.6;
    display: inline-block;
   }
    #sec02 .flex_cnt.text p {
      width: 100%;
      text-align: center;
      font-size: 4.3vw;
      margin-top: 1em;
      margin-bottom: 1em;
      margin-right: 0;
      padding-right: .5em;

    }

   #sec02 .flex_cnt.top_post .splide {
    position: initial;
    width: 100%;
    margin: 0 auto;
   }

   #sec02 .flex {
    gap: 0;
   }

   #sec02 .splide__arrows {
    right: auto;
   }

   #sec02 .post-item.new-post::before {
    background-color: #33C5FF;
   }

   .post-item{
    box-shadow: 1.5vw 1.5vw 2vw 0px rgba(51, 51, 51, 0.2);
   }

   /* イラスト */

   .sec02_illust_sp .i-item1 {
    top: 3%;
    right: 0;
    width: 36vw;
   }

   .sec02_illust_sp .i-item2 {
    top: -7%;
    left: 29%;
    transform: scaleX(-1);
    width: 9%;
   }
   .sec02_illust_sp .i-item3 {
    top: 8%;
    left: 62%;
    width: 8vw;
   }


   /* キッズクラブ */

   #sec03.sec .title h2 {
    padding: 1.5em 0 3em;
    font-size: 7.8vw;;
   }

   #sec03 .bg_2 {
    transform: translate(-50% , 1em);
   }
  .sec .title .bg_2::after {
      height: 100vw;
  }

  #sec03 .bg_2 .bg_in{
    width: 70%;
    transform: translateY(-14%);
  }

  #sec03 .bg_in img.bg_2_2{
    width: 51%;
  }

  #sec03 .bg_in img.bg_2_1{
    transform: translate(32%, 12%) rotate(-5deg);
  }
  #sec03 .active .bg_in img.bg_2_1 {
    transform: translate(32%, 2%) rotate(-5deg);
  }

  .sec03_illust img.i-item1 {
    transform: none;
    width: 50%;
    top: 30%;
    left: 53%;
    transform: translate(0 , 3em);
  }
  .active .sec03_illust img.i-item1 {
    transform: translate(0 , 0);
  }

  .sec03_illust .i-item2{
    top: 5%;
    left: 0;
    transform: none;
    width: 5vw;
  }
  .active .sec03_illust .i-item2 {
    transform: translate(0 , 0);
  }

  .sec03_illust .i-item3{
    top: 10%;
    left: 10%;
    transform: none;
    width: 5vw;
  }
  .active .sec03_illust .i-item3 {
    transform: translate(0 , 0);
  }

  .sec03_illust .i-item4{
    top: 7%;
    left: 20%;
    transform: none;
    width: 2vw;
  }
  .active .sec03_illust .i-item4 {
    transform: translate(0 , 0);
  }

  .sec03_illust .i-item5{
    top: 10%;
    left: 25%;
    transform: none;
    width: 2vw;
  }
  .active .sec03_illust .i-item5 {
    transform: translate(0 , 0);
  }

  .sec03_illust .i-item6{
    top: 15%;
    left: 30%;
    transform: none;
    width: 3vw;
  }
  .active .sec03_illust .i-item6 {
    transform: translate(0 , 0);
  }

  .sec03_illust .i-item7{
    top: 20%;
    left: 50%;
    transform: none;
    width: 2vw;
  }
  .active .sec03_illust .i-item7 {
    transform: translate(0 , 0);
  }

  .sec03_illust .i-item8{
    top: 30%;
    left: 55%;
    transform: none;
    width: 2.5vw;
  }
  .active .sec03_illust .i-item8 {
    transform: translate(0 , 0);
  }

  .sec03_illust .i-item9{
    top: 25%;
    left: 60%;
    transform: none;
    width: 2vw;
  }
  .active .sec03_illust .i-item9 {
    transform: translate(0 , 0);
  }

  .sec03_illust .i-item10{
    top: 35%;
    left: 65%;
    transform: none;
    width: 1.5vw;
  }
  .active .sec03_illust .i-item10 {
    transform: translate(0 , 0);
  }

  .illust-wrap.sec03_illust {
    z-index: 2;
  }

  #sec03 .kids_cnt-in {
    padding-top: 0;
  }

  #sec03 .kids_cnt .cnt-title_box {
    width: 70%;
    margin-bottom: 8vw;
  }

  #sec03 .kids_cnt .text {
    font-size: 4.375vw;
    width: 100%;
  }

  #sec03 .kids_cnt .text .border{
    background: linear-gradient(transparent 70%, #FFC865 30%);
  }

  .kids_illust {
    top: auto;
    bottom: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 10 / 3;
    opacity: 0;
  }

  .cnt_flex{
    margin: 7vw auto;
    width: 80vw;
  }


  #sec03 .fukidashi {
    width: 100%;
    font-size: 5.625vw;
    margin-bottom: 2em;
  }

  #sec03 .flex {
    display: block;
  }

  #sec03 .flex-t{
    gap: 3vw;
    text-align: left;
    align-items: center;
    line-height: 1.5;
  }

  #sec03 .flex-t span{
    width: 11vw;
    transform: none;
  }

  #sec03 .flex .t-cnt{
    font-size: 3.75vw;
  }

  #sec03 .flex li {
    width: 100%;
    aspect-ratio: 5 / 4;
    margin-bottom: 11vw;
    max-height: none;
  }

  #sec03 .flex.active-2 li {
    opacity: 0;
  }
  #sec03 .flex li.active-2 {
    opacity: 1;
  }


  #sec03 .flex .flex-3 {
    aspect-ratio: 10 / 9;
  }

  #sec03 .flex .kids-illust-1 img.i-item1{
    width: 16%;
    transform: translate(2em, 2em) rotate(-10deg);
    bottom: 22%;
    left: -7%;
  }
  #sec03 .flex.active-2 .kids-illust-1 img.i-item1 {
    opacity: 0;
    transform: translate(0 , 0) rotate(0);
  }
  #sec03 .flex .flex-1.active-2 .kids-illust-1 img.i-item1 {
    opacity: 1;
    transform: translate(0 , 0) rotate(0);

  }

  #sec03 .flex .kids-illust-1 img.i-item2{
    width: 12%;
    transform: translate(-2em, 2em) rotate(10deg);
    top: -3%;
    right: -4%;
  }
  #sec03 .flex.active-2 .kids-illust-1 img.i-item2 {
    opacity: 0;
    transform: translate(0 , 0) rotate(0);

  }
  #sec03 .flex .flex-1.active-2 .kids-illust-1 img.i-item2 {
    opacity: 1;
    transform: translate(0 , 0) rotate(0);
  }

  #sec03 .flex .kids-illust-2 img.i-item1 {
    width: 8%;
    transform: translate(2em, -1em);
    top: auto;
    bottom: 5%;
    left: -7%;
  }
  #sec03 .flex.active-2 .kids-illust-2 img.i-item1 {
    opacity: 0;
    transform: translate(0 , 0);
  }
  #sec03 .flex .flex-2.active-2 .kids-illust-2 img.i-item1 {
    opacity: 1;
    transform: translate(0 , 0);
  }

  #sec03 .flex .kids-illust-2 img.i-item2{
    width: 13%;
    transform: translate(-2em, 2em) rotate(10deg);
    top: 10%;
    right: -8%;
  }
  #sec03 .flex.active-2 .kids-illust-2 img.i-item2 {
    opacity: 0;
    transform: translate(0 , 0) rotate(0);
  }
  #sec03 .flex .flex-2.active-2 .kids-illust-2 img.i-item2 {
    opacity: 1;
  }

  #sec03 .flex .kids-illust-3 img.i-item1{
    width: 12%;
        transform: translate(4em, -1em) rotate(-10deg);
    bottom: -15%;
    left: -9%;
  }
  #sec03 .flex.active-2 .kids-illust-3 img.i-item1 {
    opacity: 0;
    transform: translate(0 , 0) rotate(0);
  }
  #sec03 .flex .flex-3.active-2 .kids-illust-3 img.i-item1 {
    opacity: 1;
    transform: translate(0 , 0) rotate(0);
  }

  #sec03 .flex .kids-illust-3 img.i-item2{
    width: 10%;
    transform: translate(-2em, 2em) rotate(10deg);
    top: 25%;
    right: -6%;
  }
  #sec03 .flex.active-2 .kids-illust-3 img.i-item2 {
    opacity: 0;
    transform: translate(0 , 0) rotate(0);
  }
  #sec03 .flex .flex-3.active-2 .kids-illust-3 img.i-item2 {
    opacity: 1;
    transform: translate(0 , 0) rotate(0);
  }

  #sec03 .flex .flex-3 img{
    margin-top: 5vw;
  }

  #sec03 .flex li::after{
    border: 1vw solid #33C5FF;
    border-top: 0;
    border-left: 0;
  }

  #sec03 .note{
    font-size: 3.125vw;
    margin: -2em auto 10vw;
    text-align: left;
    width: 80vw;
  }


    #sec03 .flex li:nth-last-child {
      margin-bottom: 0;
    }

    .btn-2 {
      width: 80vw;
      padding: 1.5em;
      font-size: 4vw;
      transform: scale(1);
      background: #FFB327 url(images/arrow-1-w.webp) no-repeat 90% / 0.7em;
    }
    .btn-2:hover {
        transform: scale(1);
        background: #FFB327 url(images/arrow-1-w.webp) no-repeat 90% / 0.7em;
        border: #fff .15em solid;
    }

    .btn-2::after{
      width: calc(100% - 3vw);
      height: calc(100% - 3vw);
      border: #fff 0.7vw dashed;
    }
    .btn-2:hover::after{
      border: #fff 0.7vw dashed;
    }

    .btn-2 p {
      font-size: 1em;
    }
    .btn-2:hover p {
      color: #fff;
    }

    #sec03 .subcatch {
      right: auto;
      left: -26%;
      top: -82%;
      transform: translate(0 , -20%) rotate(10deg);
      width: 26vw;
    }
    #sec03 .active-2 .subcatch {
      transform: translate(0 , 0) rotate(-10deg);
    }

    #sec03 .subcatch p {
      font-size: 3vw;
    }



    /* お知らせ */
    .news-list {
      width: 90%;
      margin: 0 auto;
    }

    #sec04 h2 {
      margin-bottom: 1em;
      font-size: min(6vw ,2em);
    }

    .news-list li {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      border-radius: .5em;
      margin-bottom: 1em;
      opacity: 0;
      transform: translateY(1em);
      transition: 1s ease all;
    }

    .news-list li.active-2 {
      opacity: 1;
      transform: translateY(0);
    }

    .news-list li a {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .news-list li img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .sec04_illust .i-item1{
      width: 28%;
      top: -4.5%;
      right: 7%;
      transform: none;
    }

    .sec04_illust .i-item1 .itme-3{
      top: 10%;
      left: -30%;
      transform: translate(1em, 2em) rotate(-30deg);
      width: 6vw;
    }
    .sec04_illust .i-item1.active-2 .itme-3 {
      transform: translate(0, 0) rotate(0);
    }


    .sec04_illust .i-item1 .itme-2{
      top: 1%;
      left: -66%;
      width: 6vw;
      transform: translate(2em, 1em) rotate(20deg);
    }
    .sec04_illust .i-item1.active-2 .itme-2 {
      transform: translate(0, 0) rotate(0);
    }

    .sec04_illust .i-item3{
      bottom: -14vw;
      left: 0;
      transform: none;
      width: 42%;
    }

    .sec04_illust .illust-flex.i-item2{
      display: none;
    }

    /* インフォメーション */

    #sec05.sec{
      padding: 16vw 0;
      z-index: -1;
      overflow: hidden;
    }

    #sec05 .movie-cnt::after {
      width: 4em;
    }

    #sec05 .movie .movie-t {
      width: 60vw;
      transform: translate(11%, 3%);
    }

    .circletext_text {
      font-size: 1.2em;

    }

    .sec05_illust {
      display: none;
    }

    #sec05 h2 {
      font-size: min(7.5vw , 2.5em);
    }


    #kids h2 {
      font-size: min(7.5vw , 2em);
    }



    /* アンケートレポート */

    #sec06.sec {
      background: #F7FFE9;
      padding: 8vw 0;
      overflow: hidden;
    }
    /* 動画が来たら変更 */
    /* #sec04 {
      padding: 4em 0 2em 0;
    } */

    #sec06.sec .sec-in {
      transform: translateX(0);
    }

    #sec06 .report-cnt::after{
      opacity: 0;
    }

    #sec06 .flex.pc {
      display: none;
    }

    #sec06 .post-item {
      box-shadow: none;
      border: #33C5FF solid .05em;
    }

    #sec06 .illust-wrap {
      position: initial;
      transform: translate(0 , 0);
    }

    .sec06_illust .i-item1 {
      transform: translate(0 , 1em);
      width: 45%;
      margin-left: 5vw;
      transition: 1s ease all;
    }
    .active .sec06_illust .i-item1 {
      transform: translate(0 , 0);
    }

    .sec06_illust img.i-item3 {
      position: absolute;
      transform: translate(0 , 1em) rotate(-10deg);
      z-index: -1;
      width: 60%;
      right: -3%;
      transition: 1s ease all;
    }
    .active .sec06_illust .i-item3 {
      transform: translate(0 , 0) rotate(0);
    }

    .sec06_illust img {
      position: initial;
    }

    #sec06 .report-cnt .report-flex{
      width: 80%;
      margin: 8vw auto 0;
      padding: 0;
    }

    #sec06 .report-cnt {
      transform: translate(-50% , 1em);
      opacity: 0;
      transition: 1s ease all;
    }
    #sec06 .report-cnt.active-2 {
      transform: translate(-50% , 0);
      opacity: 1;
    }

    #sec06 .btn-1{
      margin-top: 8vw;
    }


    #sec06 .splide__arrow--next{
      right: auto;
      left: 102%;
      height: 7vw;
      width: 7vw;
      opacity: 1;
      background: #AAAAAA url(images/arrow-4-w2.webp) no-repeat center / 57%;
    }

    #sec06 .splide__arrow--prev{
      right: 102%;
      left: auto;
      height: 7vw;
      width: 7vw;
      opacity: 1;
      background: #AAAAAA url(images/arrow-4-w1.webp) no-repeat center / 57%;
    }

    #survey .post-text, #sec06 .post-text{
      padding: 1vw;
    }

    #survey .post-title, #sec06 .post-title{
      font-size: 5vw;
    }

    /* 自治体 */
    #sec07.sec {
      padding: 16vw 0 0;
      overflow: hidden;
      background-color: #F7FFE9;
    }
     #sec07 .sec-in {
      width: 90%;
      margin: 0 auto;
     }

     /* 地図 */
     #sec07 .map .bg_1 {
        mask-image: url(images/map-bg2_sp.webp);
        -webkit-mask-image: url(images/map-bg2_sp.webp);
     }

     #sec07 .flex {
      display: block;
     }
    #sec07 .flex.pc {
      display: none;
    }
    #sec07 .list-in .list-area {
      margin-bottom: 0.5em;
      font-size: 5.625VW;
    }

    #sec07 .list-in .list-area::before,
    #sec07 .list-in .list-area::after{
      width: 17vw;
      height: 1vw;
    }


     /* アコーディオン */

    #sec07 .list-cnt.list-1 {
      padding: 8vw 0 0 0;
    }

    .area-items {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
    }

    .area-group.active .area-items {
      max-height: 1000px;

    }

    .area-group {
      opacity: 0;
      transform: translateY(1em);
      transition: 1s ease all;
    }
    .area-group.active-2 {
      opacity: 1;
      transform: translateY(0);
    }

    .area-title {
      position: relative;
      font-size: 5vw;
      width: 100%;
      text-align: center;
      padding: 0 0 0.2em;
      font-weight: bold;
      border: none;
      border-bottom: 2px solid #522519;
      margin-bottom: 1em;
      font-family: "Zen Maru Gothic", sans-serif;
      color: #522519;

    }

    .area-title::before,
    .area-title::after{
      content: '';
      position: absolute;
      right: 0;
      top: 40%;
      width: 1em;
      height: 2px;
      background: #999;
      transform-origin: center;
      transition: ease 0.3s;
    }

    .area-group .area-title::after{
      transform: rotate(90deg);
    }

    .area-group.active .area-title::after{
      transform: rotate(0);
    }

    #sec07 .list-item {
      margin-bottom: .8em;
    }
    #sec07 .list-item.list-1:hover::before,
    #sec07 .list-item.list-2:hover::before,
    #sec07 .list-item.list-3:hover::before,
    #sec07 .list-item.list-4:hover::before,
    #sec07 .list-item.list-5:hover::before,
    #sec07 .list-item.list-6:hover::before,
    #sec07 .list-item.list-7:hover::before {
      background: #fff url(images/arrow-1-br.webp) no-repeat 90% / .6em;
    }

    #sec07 .list-item:hover {
      transform: translate(0 , 0);
    }

    #sec07 .list-item:hover::after {
      opacity: 1;
    }



     #sec06 .flex li.post-item {
      width: 100%;
     }

    .map-illust {
      transform: translate(-50% , -3em);
    }

    #sec07 .map-illust .bg {
      transform: translate(-50% , 3em);
    }

    .map-illust-2 .i-item1 {
      width: 30vw;
      transform: translate(1em, -6em);
    }

    #sec06 h3, #sec07 h2 {
      font-size: min(7.5vw , 2.5em);
      margin-bottom: 0.5em;
    }

     #sec07 h2 {
      text-align: left;
      width: 90%;
     }


    .toggle-btn {
      position: absolute;
      z-index: 10;
      bottom: 0;
      left: 5%;
      transform: translate(0, -5vw);
      text-align: center;
    }

    .area-label {
      font-size: 16px;
    }

    .toggle-btn p{
      font-size: min(3.75vw , 16px);
    }

    .map_bg_illust .i-item1{
      transform: scaleX(-1);
      transform: translate(-2em, 2em) scaleX(-1) rotate(10deg);
      bottom: auto;
      left: 20%;
      top: -60%;
      width: 10vw;
    }
    .map_bg_illust .i-item1.active-2 {
      transform: translate(0, 0) scaleX(-1) rotate(0);
    }

    .map_bg_illust .i-item2{
      bottom: 20%;
      left: 40%;
      width: 5vw;
      max-width: 25px;
      transform: translate(0, 1em);
      transition: .5s .3s ease all;
    }
    .map_bg_illust .i-item2.active-2 {
        transform: translate(0,0);
    }

    .map_bg_illust .i-item3{
      transform: translate(0,1em);
      bottom: 20%;
      left: 32%;
      width: 7vw;
      max-width: 30px;
      transition: .5s .2s ease all;
    }
    .map_bg_illust .i-item3.active-2 {
        transform: translate(0,0);
    }

    .map_bg_illust .i-item4{
      transform: translate(0 , 1em);
      bottom: 30%;
      left: 5%;
      width: 10vw;
      max-width: 50px;
      transition: .5s ease all;
    }
    .map_bg_illust .i-item4.active-2 {
        transform: translate(0,0);
    }

    .map_bg_illust .i-item5{
      transform: translate(0 , 1em);
      bottom: 29%;
      left: 20%;
      width: 10vw;
      max-width: 50px;
      transition: .5s .1s ease all;
    }
    .map_bg_illust .i-item5.active-2 {
        transform: translate(0,0);
    }

    .map_bg_illust .i-item6 {
      transform: translate(0 , 1em);
      bottom: 18%;
      left: 50%;
      width: 9vw;
      max-width: 50px;
      transition: .5s .4s ease all;
    }
    .map_bg_illust .i-item6.active-2 {
        transform: translate(0,0);
    }

    .map_bg_illust .i-item8{
      transform: translate(0 , 1em);
      bottom: 18%;
      left: 62%;
      width: 10vw;
      max-width: 45px;
      transition: .5s .5s ease all;
    }
        .map_bg_illust .i-item8.active-2 {
        transform: translate(0,0);
    }

    .map_bg_illust .i-item7,
    .map_bg_illust .i-item9,
    .map_bg_illust .i-item10,
    .map_bg_illust .i-item11{
      display: none;
    }

    /* モーダル */

    #map-modal {
      width: 90%;
      border-radius: .2em;
      aspect-ratio: 10 / 11;
    }

    .modal-wrap .modal-map {
      transform: scale(1.2);
    }

    .modal-map svg {
      width: 100%;
    }

    .map-modal_in {
      padding: 4vw;
    }

    .modal-title {
      margin-bottom: 10.5vw;
    }

    .modal-pagination {
      margin-top: 10vw;
      font-size: 4vw;
    }

    #map-modal__close {
      width: 10vw;
      max-width: 3em;
    }

    /* 子育て情報 */

    #sec07 .sec-t {
      text-align: left;
      width: 65%;
    }

    #sec07 .map-list {
      padding: 8vw 0;
      padding: 4vw 0 8vw 0;
    }

    #sec07 .map-list h4 {
      font-size: 7vw;
      text-align-last: left;
      line-height: 1.3;
      margin-bottom: 0.5em;
      margin-left: 7%;
    }

    #sec07 .flex {
      gap: 1em;
    }

    #sec07 .list-item {
      width: 98%;
      font-size: 5vw;
      padding: 0.3em 0;
      opacity: 1;
    }

    .sec07_illust-1{
      z-index: -1;
    }

    .sec07_illust-2 img{
      display: none;
    }

    .sec07_illust-2 .i-item1{
      display: block;
      width: 40%;
      left: auto;
      right: -6%;
    }
    .sec07_illust-2 .i-item1.active-2 {
      display: none;
    }

    #sec07 .map-list h3 {
      line-height: 1.5;
      margin-bottom: .5em;
      font-size: 7.5vw;
      font-size: min(6vw , 2em);
    }

    #sec07 .list-cnt{
      padding: 8vw 0;
    }

    #footer .banner{
      width: 90%;
      margin-bottom: 8vw;
    }

    #footer .banner .flex{
      flex-wrap: wrap;
      width: 100%;
      margin: 0 auto;
    }

    #footer .banner .flex li{
      width: calc(100% / 2 - 1em);
      margin-bottom: 3vw;
      border: 0.75vw solid #33C5FF;
      border-radius: 2vw;
      padding: 0 5%;
    }

    #footer .banner .flex li:hover {
      opacity: 1;
    }

    #footer .banner .flex li img{
      height: 80%;
    }

    .go-to-top:hover {
      animation: none;
    }

    #footer .banner .flex li::after{
      width: 4vw;
      height: 4vw;
      right: 3%;
    }

    .footer_wrap{
      padding: 4vw 0 2vw;
    }

    .footer_sitelogo_w{
      width: 70%;
      max-width: 200px;
      height: auto;
      aspect-ratio: unset;
      margin-bottom: 4vw;
    }

    .footer_sitelogo_w img{
      width: 100%;
    }

    .footer-logo{
      display: block;
    }

    #footer .sns{
      width: 100%;
      margin-bottom: 2em;
    }

    #footer .seibu-logo{
      width: 100%;
      justify-content: center;
    }

    #footer .sns .flex,
    #footer .seibu-logo .flex{
      justify-content: center;
      gap: 5%;
      height: auto;
    }
    #footer .sns .flex {
      height: 5em;
    }

    #footer .sns li{
      height: 100%;
    }

    #footer .sns li img{
      height: 100%;
    }

    #footer .seibu-logo li{
      width: 40%;
    }

    .footer-bottom{
      margin-top: 3vw;
      margin-bottom: 0;
      padding: 0;
    }

    .copyright{
      font-size: 10px;
    }



        /* 新規追加 ---------------------------------------------*/
  .banner_area{
    width: 100%;
    height: auto;
    aspect-ratio: 393 / 50;
    background: #FFB427;
  }

  #f_banner{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 393 / 50;
    z-index: 10;
  }

  #f_banner img{
    width: 100%;
    height: auto;
  }

  /* 既存変更 ---------------------------------------------*/
  .news-list{
    width: 80%;
  }

  .header-nav .header-menu{
    top: calc(50% - 11vw);
    transform: translate(-50%, -30%);
    opacity: 0;
  }

  .header-nav li{
    font-size: 4.68vw;
    width: 80%;
    gap: 0.5em;
  }

  .header-nav li a{
    width: 100%;
    font-size: .8em;
  }
  .header-nav li a:hover {
    opacity: 1;
  }
  .logo-image a:hover {
    opacity: 1;
  }

  #fv .splide__arrow.splide__arrow--prev:hover, #fv .splide__arrow.splide__arrow--next:hover {
    transform: translate(0 , 0) scale(1);
  }

  #nav-deco{
    pointer-events: none;
  }

  #nav-deco .illust_in .not-nav-sen{
    opacity: 0;
    transform: scale(0.7);
    width: 100%;
    height: 100%;
    position: relative;
  }

  #nav-deco.active .illust_in .not-nav-sen{
    animation: spmenu2 0.3s ease 0.8s forwards;
  }

  @keyframes spmenu2 {
    0%   { transform: scale(0.7); opacity: 0;}
    100% { transform: scale(1); opacity: 1;}
  }


  /* 下層共通_sp */

  .page-header h2 {
    font-size: 4em;
  }

  /* 記事一覧_sp */
  #article.post.sec {
    font-size: 4.37vw;
  }


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

  #article .post-item {
    width: 100%;
  }

  /* 一覧イラスト_2 */
  .article-body_illust .i-item1 {
    bottom: -.45%;
    width: 11%;
    left: 6%;
    z-index: 1;
}
.article-body_illust .i-item2 {
    width: 4%;
    left: 19%;
    z-index: 1;
}
.article-body_illust .i-item3 {
    bottom: -.2%;
    width: 44%;
    left: 12%;
}


.article-body_illust .i-item4 {
    bottom: 1.5%;
    width: 7%;
}

  .article-body_illust .i-item7 {
      display: block;
      width: 7%;
      left: auto;
      right: 17%;
  }
.article-body_illust .i-item8 {
    width: 5%;
    right: 7%;
}
.article-body_illust .i-item9 {
    width: 4%;
    right: 2%;
}
.article-body_illust .i-item11 {
    bottom: -.5%;
    width: 16%;
    left: 49%;
}
.article-body_illust .i-item12 {
    bottom: -1.8%;
    width: 25%;
    right: 4%;
    transform: scaleX(-1);
}

.page-contet {
  padding: 3em 0 1.5em 0;
}

.filter-status-header h2 {
  margin-bottom: 1em;
}




  .post-right {
    display: none;
  }

  .post-left {
    width: 80%;
    margin: 0 auto;
  }

  .post-main {
    width: 100%;
  }

  .main-bg-box span {
    display: none;
  }


  /* アンケートレポート_sp */

  #survey.post.sec {
    font-size: 4.37vw;
  }


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

  #survey .post-item {
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
  }

  #survey .post-item:hover {
    transform: scale(1);
  }

  .post-deco p {
    font-size: 2.5vw;
  }

  .pagination a:hover {
    background-color: initial;
  }

  /* 下層ヘッダー */

  .t-box {
    height: 15%;
    max-height: 60px;
  }

  .page-header .t-box img {
    width: 18%;
  }

  .page-header .t-box {
    height: 9%;
  }


  .page-header {
    aspect-ratio: 10 / 7;
    height: auto;
    font-size: 2.5vw;
  }

  .post.sec {
    margin-top: 0;
  }

  .post .sec-in {
    position: relative;
    padding: 4em 0 40vw 0;
  }
  .post .sec-in::after {
    position: absolute;
    content: '';
    top: 0;
    left: -8%;
    width: 100%;
    height: 100%;
    background: url(images/bg/bg_1_2.webp) repeat-y left / 20%;
  }

  #article.post .sec-in {
    background-color: #FFF5C8;
    background: #FFF5C8 url(images/bg/bg_2.webp) repeat center / 40%;

  }
  #article.post .sec-in::after {
    background: url(images/bg/bg_2_2.webp) repeat-y left / 20%;
  }

  #survey.post .sec-in {
    background: #E4F3CA url(images/bg/bg_3.webp) repeat center / 40%;

  }
  #survey.post .sec-in::after {
    background: url(images/bg/bg_3_2.webp) repeat-y left / 20%;

  }


  .main-bg-box::after {
    display: none;
  }

  #article.post .main-bg {
    display: none;
  }

  .post-category {
    font-size: .6em;
  }

  #article .post-title {
    font-size: max(3vw , 1.2em);
    font-size: 5vw;
  }

  #topic-slider .post-title {
    font-size: max(1.2vw , 1em);
    line-height: 1.5;
  }



  #topic-slider {
    width: 100%;
    padding: 0 5%;
  }

  #heder-article .deco-1 {
    transform: translate(-16%, -4em);
  }
  #heder-article.load .deco-1 {
    transform: translate(-16%, -5em);
  }

  #heder-article .deco-2 {
    width: 8%;
    bottom: 15%;
    left: 25%;
    transform: translate(0, 1em);
  }
  #heder-article.load .deco-2 {
    transform: translate(0, 0);
  }

  #heder-article .deco-3 {
    width: 20%;
    transform: translate(30% , -.5em);
  }
    #heder-article.load .deco-3 {
    transform: translate(30% , -1.5em);
  }

  #heder-article .deco-4 {
    width: 12%;
    transform: translate(-90% , -4.6em);
  }
    #heder-article.load .deco-4 {
    transform: translate(-90% , -5.6em);
  }

  #heder-article .deco-5 {
    width: 20%;
    transform: translate(16% , -4em);
  }
    #heder-article.load .deco-5 {
    transform: translate(16% , -5em);
  }

  #heder-article.heder-article-post .deco-7 {
    width: 28%;
    bottom: -18%;
    right: 17%;
    aspect-ratio: 5 / 4.36;
    z-index: 10;
}

  #heder-article .deco-7 {
    width: 40%;
    bottom: -34%;
    right: 2%;
  }

  #heder-topice .deco-1 {
    width: 10%;
    transform: translate(80%, 1em);
    bottom: 18%;
  }
  #heder-topice.load .deco-1 {
    transform: translate(80%, 0);
  }


  #heder-topice .deco-2 {
    width: 7%;
    bottom: 18%;
    left: 20%;
    transform: translate(0, 1em);
  }
  #heder-topice.load .deco-2 {
    transform: translate(0, 0);
  }

  #heder-topice .deco-3 {
    width: 4.5%;
    bottom: 10%;
    left: 30%;
    transform: translate(0, 1em);
  }
  #heder-topice.load .deco-3 {
    transform: translate(0, 0);
  }

  #heder-topice .deco-4 {
    width: 5%;
    bottom: 10%;
    left: 35%;
    transform: translate(0, 1em);
  }
  #heder-topice.load .deco-4 {
    transform: translate(0, 0);
  }

  #heder-topice .deco-5 {
    width: 18%;
    bottom: 0;
    left: 0;
    transform: translate(10%, -110%);
  }
  #heder-topice.load .deco-5 {
    transform: translate(10%, -100%);
  }

  #heder-topice .deco-6 {
    width: 6%;
    bottom: 15%;
    right: 20%;
    transform: translate(0, 1em);
  }
  #heder-topice.load .deco-6 {
    transform: translate(0, 0);
  }

  #heder-topice .deco-7 {
    width: 8cqw;
    bottom: 15%;
    right: 10%;
    transform: translate(0, 1em);
  }
  #heder-topice.load .deco-7 {
    transform: translate(0, 0);
  }

  #heder-topice .deco-8 {
    width: 5%;
    bottom: 0;
    right: 0;
    transform: translate(-150%, -90%);
  }
  #heder-topice.load .deco-8 {
    transform: translate(-150%, -80%);
  }

  #heder-topice .deco-9 {
    width: 5%;
    bottom: 0;
    right: 0;
    transform: translate(-33%, -60%);
  }
  #heder-topice.load .deco-9 {
    transform: translate(-33%, -50%);
  }

  #heder-topice .deco-10 {
    width: 27%;
    bottom: -12%;
    left: auto;
    transform: translateX(1em) scaleX(1);
    right: 9%;
  }
  #heder-topice.load .deco-10 {
    transform: translateX(0) scaleX(1);
  }

  #heder-topice.heder-topice-post .deco-10 {
    width: 35%;
    bottom: -13%;
    left: 65%;
  }

  #heder-survey .deco-1 {
    top: 20%;
    width: 26%;
  }


  #heder-survey .deco-2 {
    width: 8%;
    bottom: 32%;
    left: 7%;
  }
  #heder-survey .deco-3 {
    width: 18%;
    top: 72%;
    right: 5%;
    transform: translate(-1em , -70%) rotate(10deg);
  }
  #heder-survey.load .deco-3 {
    transform: translate(0 , -50%) rotate(2deg);
  }

  #heder-survey .deco-4 {
    width: 10%;
    top: 20%;
  }

  #heder-survey .deco-5 {
    width: 25%;
    bottom: 20%;
  }

  #heder-survey .deco-6 {
    width: 40%;
    bottom: -17%;
  }

  #heder-about .deco-1 {
    bottom: 13%;
    left: 3%;
    transform: translate(0, 1em);
    width: 5%;
  }
  #heder-about.load .deco-1 {
    transform: translate(0, 0);
  }


  #heder-about .deco-2 {
    bottom: 13%;
    left: 3%;
    transform: translate(150%, 1em);
    width: 4.8%;
  }
    #heder-about.load .deco-2 {
    transform: translate(150%, 0);
  }

  #heder-about .deco-3 {
    bottom: 13%;
    left: 20%;
    transform: translate(0 , 1em);
  }
    #heder-about.load .deco-3 {
    transform: translate(0 , 0);
  }

  #heder-about .deco-4 {
    bottom: 25%;
    right: 25%;
    transform: translate(0, 1em);
  }
  #heder-about.load .deco-4 {
    transform: translate(0 , 0);
  }

  #heder-about .deco-5 {
    transform: translate(-25%, -90%);
    width: 20%;
  }
  #heder-about.load .deco-5 {
    transform: translate(-25%, -110%);
  }

  #heder-about .deco-6 {
    bottom: 25%;
    right: -6%;
    transform: translate(0, 1em) scaleX(-1);
  }
  #heder-about.load .deco-6 {
    transform: translate(0, 0) scaleX(-1);
  }


  #heder-about .deco-7 {
    bottom: -17%;
    left: 43%;
    width: 35%;
  }

  /* ABOUT */

  .about-text {
    margin-top: 4em;
  }

  .about-text .site-logo {
    margin-bottom: 3em;
  }

  .about-text .site-logo img {
    width: 70%;
    max-width: 300px;
  }

  .about-btn {
    width: 80%;
  }

  .about-btn:hover {
    transform: scale(1);
  }

  .about-textbox {
    max-width: 600px;
  }

  /* 記事内容 */


  .article-content {
    font-size: 4.37vw;
    margin: 2em auto;
  }

    .article-cnt-box {
      width: 85%;
  }

  /* おでかけ */


  .topic_illust .i-item1 {
      width: 20%;
      left: -18%;
  }

.topic_illust .i-item3 {
    width: 20%;
    right: -26%;
}

.topic_illust .i-item4 {
    width: 26%;
    top: -11%;
}

.topic_illust .i-item5 {
    width: 11%;
    left: 0;
    top: 0;
    transform: translate(-50% , -150%);
}

.topic_illust .i-item6 {
    width: 11%;
    left: 0;
    top: 0;
    transform: translate(80% , -20%) scale(-1) rotate(-26deg);
}
.topic_illust .i-item6.active-2 {
  transform: translate(100% , -80%) scale(-1) rotate(-36deg);
}

.topic_illust .i-item8 {
    width: 6%;
    top: 0;
    right: 0;
    transform: translate(-5% , 160%);
}
.topic_illust .i-item8.active-2 {
    transform: translate(0% , 150%);
}

.topic_illust .i-item7 {
    width: 5.5%;
    top: 0;
    right: 0;
    transform: translate(100% , 50%);
}
.topic_illust .i-item7.active-2 {
    transform: translate(110% , 10%);
}

.topic_illust .i-item9 {
    width: 34%;
    left: 0;
    bottom: 0;
    transform: translate(20% , 20%);
}

.topic_illust .i-item10 {
    width: 20%;
    bottom: 0;
    right: 0;
    transform: translate(-30% , 20%);
}

.topic-cnt-box {
  border-radius: 1em;
  padding: 0;
}

.survey-content {
  width: 85%;
}

#topic-slider .splide__arrow--next,
#topic-slider .splide__arrow--prev {
  width: 7vw;
  transform: translate(-45% , -50%);
  background: #AAAAAA url(images/arrow-4-w1.webp) no-repeat center / 57%;
}
#topic-slider .splide__arrow--prev {
  transform: translate(40% , -50%);
  background: #AAAAAA url(images/arrow-4-w2.webp) no-repeat center / 57%;
}

#topic-slider .post-text {
  height: 50%;
}

#topic-slider .post-item {
  aspect-ratio: 9.5 / 10;
  border-radius: 1.1em;
  font-size: 4.37vw;

}


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

.btn-3 {
  aspect-ratio: 10 / 3;
}

.btn-3 .flex {
  gap: 0;
}

.btn-3 p {
  font-size: 3.8vw;
  padding-left: .5em;
}

.btn-3 .cnt1 {
  width: 25%;
}

.btn-3 .cnt2 {
  width: 75%;
}

.btn-3 .cnt1 img {
  position: initial;
  height: 100%;
  width: 90%;
  object-fit: contain;
  margin: 0 auto;
  display: block;

}

.survey-content .nav-links {
  flex-direction: column;
  align-items: center;
}

.survey-content .nav-previous, .survey-content .nav-next {
  width: 100%;
}

.survey-content .nav-previous {
  margin-bottom: 1em;
}

.survey-content .nav-previous span.title, .survey-content .nav-next span.title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.survey-content .nav-previous span.title {
  padding: 1em .5em 1em 1.5em;
}
.survey-content .nav-next span.title {
    padding: 1em 1em 1em .5em;
}

/* アンケート */


.survey-body_illust .i-item1 {
    bottom: 0;
    width: 5%;
    left: 4%;
}

.survey-body_illust .i-item2 {
    bottom: 0;
    width: 6.5%;
    left: 11%;
}

.survey-body_illust .i-item3 {
    gap: .25em;
    width: 12%;
    left: 21%;
}
.survey-body_illust .i-item4 {
    bottom: -.1%;
    width: 4%;
    left: 35%;
}
.survey-body_illust .i-item8 {
    width: 10%;
    right: 3%;
}
.survey-body_illust .i-item5 {
    width: 6%;
    right: 34%;
}
.survey-body_illust .i-item6 {
    width: 8%;
    right: 25%;
}
.survey-body_illust .i-item7 {
  width: 4%;
}
.survey-body_illust .i-item9 {
    bottom: -1%;
    width: 20%;
    left: 40%;
}
.survey-body_illust .i-item10 {
    bottom: -2.5%;
    width: 29%;
    right: 4%;
}

  .article-content::before {
      left: 0;
      width: 28%;
      height: auto;
      aspect-ratio: 7 / 10;
      background: url(images/article-post_deco1-sp.webp) no-repeat center / contain;
      transform: translate(-33%, -15%);
  }

  .article-content::after {
    pointer-events: none;
    content: '';
    position: absolute;
    bottom: 0;
      right: 0;
      width: 28%;
      height: auto;
      aspect-ratio: 7 / 10;
      background: url(images/article-post_deco2-sp.webp) no-repeat center / contain;
      transform: translate(33%, 28%) rotate(23deg);
  }

  .single-article-post.no-sidebar .content .main {
    padding-bottom: 35%;
  }

  .article-deco-in::before {
    top: -1.2%;
    right: 25%;
    width: 100%;
  }

  .article-deco-in::after {
    left: -40%;
    width: 100%;
    transform: translateY(144%);
  }

  .toc ul {
    gap: .5em 1em;
  }

  .topic-cnt-box .toc li {
    width: calc(100% / 2 - .5em);
    max-width: initial;
  }

  .toc a {
    text-align: center;
    padding: .2em;
  }

.breadcrumb__list .is-current {
  width: 20%;
}


/* 目次_sp */
.toc-content {
  padding: .5em 1.2em 1.5em 1.2em;
}


.wp-block-table table:not(.has-border-color) :where(th, td) {
  font-size: 1em;
}


.wp-block-cocoon-blocks-button-1 .btn:hover, .wp-block-vk-blocks-button.vk_button .vk_button_link.btn:hover, .api-url a:hover {
  transform: scale(1);
  opacity: 1;
}

.post-item.topic-post:hover img {
  transform: scale(1);
}

.post-item.topic-post:hover .post-text::after {
  animation: none;
}

#topic-slider .splide__arrow--prev:hover {
  transform: translate(40%, -50%) scale(1);
}

#topic-slider .splide__arrow--next:hover {
  transform: translate(-45%, -50%) scale(1);
}

.filter-group.deselect:hover a {
  color: #333;
}

.filter-group.deselect:hover {
  background: #fff;
}

.kids-img {
  position: relative;
  aspect-ratio: 2 / 1;
  margin-bottom: 2em;
}

.kids-img a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  /* background-color: #eee; */
}

#kids img.seibu-kids {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
  /* margin: 1em auto; */
  opacity: 0;
  border-radius: 1.1em;
  transform: translateY(1em);
  transition: 1s ease all;
}

#kids.active img.seibu-kids {
  opacity: 1;
  transform: translateY(0);
}

.kids-banner {
  gap: 1em;
}

.kids_in2 {
  padding: 2em 0 0 0;
  width: 100%;
  /* max-width: 400px; */
}

.kids_in2 .kids-cnt2 {
  width: 100%;
  /* padding: 1em 0; */
}

.kids_in2 .kids-cnt2:hover img {
  transform: scale(1);
}

.kids-cnt2 p {
  font-size: 4vw;
}


.sec#kids {
  padding: 4em 0 0 0;
}

.kids_in {
  background: initial;
  aspect-ratio: initial;
}

.kids-cnt {
  position: initial;
  width: 100%;
  padding: 1.5em 0;
  font-size: 4vw;
  transform: translate(0 , 0);
  background: #33C5FF url(images/arrow-1-w.webp) no-repeat 95% / .5em;
}
.kids-cnt:hover {
  background: #33C5FF url(images/arrow-1-w.webp) no-repeat 95% / .5em;
  transform: translate(0 , 0) scale(1);
}

.kids-cnt::before,
.kids-cnt:hover::before {
  width: calc(100% - 3vw);
  height: calc(100% - 3vw);
  border: #fff 0.7vw dashed;
}

.kids-cnt p {
  color: #fff;
  font-size: 1em;
}
.kids-banner_illust .i-item3 {
  width: 20%;
  transform: translate(-10% , -90%);
}
.active-2 .kids-banner_illust .i-item3 {
  transform: translate(-10% , -100%);
}
.kids-banner_illust .i-item4 {
  width: 25%;
}




.kids-traindriver .banner_area,
.kids-traindriver #f_banner {
  display: none;
}

.kids-traindriver.kids-traindriver #heder-kids ,
.kids-traindriver.kids-traindriver .breadcrumb  {
  display: none;
}
.kids-traindriver.kids-traindriver .sec {
  padding: 0;
}

.kids-traindriver.kids-traindriver #header-container {
  position: initial;

}

#heder-kids .deco-1 {
  transform: translate(-10%, -280%);
}

#heder-kids.load .deco-1 {
  transform: translate(-10%, -300%);
}

#heder-kids .deco-2 {
  width: 20%;
  transform: translate(40% , -50%);

}

#heder-kids.load .deco-2 {
  transform: translate(40% , -70%);
}

#heder-kids .deco-3 {
  transform: translate(320% , -100%);
}
#heder-kids.load .deco-3 {
  transform: translate(320% , -120%);
}

#heder-kids .deco-4 {
    transform: translate(-500% , 220%);
}
#heder-kids.load .deco-4 {
    transform: translate(-500% , 200%);
}

#heder-kids .deco-5 {
    transform: translate(-100%, 120%);
    width: 12%;
  }
#heder-kids.load .deco-5 {
    transform: translate(-100%, 100%);
}


#heder-kids .deco-6 {
  transform: translate(-200%, -50%);
  width: 15%;
}
#heder-kids.load .deco-6 {
  transform: translate(-200%, -70%);
}

#heder-kids .deco-7 {
  transform: translate(-120%, -60%);
  width: 12%;
}
#heder-kids.load .deco-7 {
    transform: translate(-120%, -80%);
}

#heder-kids .deco-8 {
  width: 6%;
  transform: translate(-50%, 0);
}

#heder-kids.load .deco-8 {
  transform: translate(-50%, -20%);
}

#heder-kids .deco-9 {
    transform: translate(-20%, 50%);
  width: 25%;
}
#heder-kids.load .deco-9 {
    transform: translate(-20%, 35%);
}

#kids .kids-text {
  width: 100%;
  font-size: .8em;
  text-align: left;
}

  .illust_in .nav-sen img {
    animation: map_train 1s linear forwards;
  }

  .illust_in .nav-sen img:nth-of-type(2) {
    animation: map_train 1s 0.2s linear forwards;
  }

  .kids-banner_illust .i-item5 {
    width: 80%;
    transform: translate(-50% , 25%);
  }

  .active-2 .kids-banner_illust .i-item5 {
    transform: translate(-50% , 15%);
  }




}


/* @media screen and (max-width: 768px){
  #slider1 .splide__list {
    transition: transform 0.5s ease;
    will-change: transform;
  }

  #slider1 .splide__list .splide__track {
    transform: translateZ(0);
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
} */



/* transition は Splide の JS に任せるため、ここには書かない */
#slider1 .splide__list {
  will-change: transform;
  transform: translateZ(0);
  /* transition: transform 0.5s ease !important; */
}

/* もし画像がガタつくならこれだけ追加 */
#slider1 .splide__slide img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


@media (max-width: 991.98px) {
    .single .wp-block-table.is-style-vk-table-cell-vertical[data-cell-vertical-breakpoint=table-cell-vertical-tablet]:not(.is-style-stripes) table:where(:not(.has-border-color)) tr:first-of-type :is(th, td):first-of-type {
        border-top-color: var(--cocoon-x-thin-color);;
    }
}


@media screen and (max-width: 360px){
  #footer .banner {
    width: 80%;
  }
  #footer .banner .flex li {
    width: 100%;
  }

}

/* style.css のスライダー関連部分に追加 */

#slider1 .splide__list {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* iPhoneでのスクロール中の停止を防ぐ */
  -webkit-perspective: 1000;
  perspective: 1000;
}

#slider1 .splide__slide {
  /* 描画のガタつきを抑える */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}