@charset "utf-8";
/* CSS Document */
.sp {
  display: none;
}
.pc {
  display: block;
}
.main {
  background-color: #bfcddd;
  width: 100%;
  padding-bottom: 10px;
}
/***************************
top
***************************/
.category {
  position: relative;
}
.category__image {
  height: 80vh;
  width: 100%;
  background-position: 50% 50%;
  background-size: cover;
/*  background-image: url("../img/station/18_kenchoumae/top.jpg")*/
}
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  opacity: 0;  
}
@keyframes fadeInAnime {
  from {
      opacity: 0;
    }
  to {
      opacity: 1;
    }
}
.st_title-wrapper{
  position: absolute;
  right: 50%;
  bottom: 44%;
  transform: translate(50%, 50%);
  width: 100%;
}
.st_h1-title {
  line-height: 6rem;
  text-align: center;
  color: #fff;
  font-size: 4rem;
  font-weight: 500;
  letter-spacing: 0.6rem;
}
.st_sub-title {
  color: #fff;
  display: flex;
  font-size: 1.6rem;
  justify-content: center;
}
img.brackets {
  width: 1rem;
  margin: 0 20px;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.1));
}
.st_h1-title,
.st_sub-title p{
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
}
.wave {
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
}
.wave img {
  width: 100%;
  display: block;
}
.box-area{
  background-color: #f9f9f9;
  margin-bottom: 100px;
  border-radius: 1em;
  box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);
  padding-bottom: 4%;
}

/***************************
h2-wrapper
***************************/
h2.station_h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 0;
}
.st_logo2 {
  width: 24%;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
}
.st_map {
  width: 74%;
}
/***************************
wrapper01
***************************/
.wrapper01 {
  display: flex;
  padding: 4% 4% 3% 4%;
  border-radius: 1em;
  margin: 60px auto 0;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.wrapper01_main {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2,1fr);
  gap: 4%;
}
.wrapper01_main_img img {
  width: 550px;
  height: 100%;
  border-radius: 1em;
}
.wrapper01 ul {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 3%;
  width: 100%;
}
.main_img01 img {
  width: 100%;
  border-radius: 1em;
  object-fit: cover;
  margin: 0 auto;
  aspect-ratio: 1/0.7;
}
.discription-wrapper p{
  margin: 0 auto;
  text-align: left;
}

/* Google Mapを囲う要素 */
.map {
  position: relative;
  height: 0;
  padding-top: 50%;
  margin: 0 4%;
}
/* Google Mapのiframe */
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slick-slider {
  background-color: #bfcddd;
}
.post-item-area h3 {
  max-width: 50%;
}
ul.post-item-wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 4%;
}
.post-item-wrapper li {
  list-style: none;
  background-color: #f9f9f9;
  border-radius: 1em;
  box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);
}
.post-item-li {
  padding: 0 0 60px;
}
img.category-section_picture {
  border-radius: 1rem 1rem 0 0;
  width: 100%;
  aspect-ratio: 1/0.7;
}
h4 {
  color: #002c5a;
  font-size: 1.8rem;
  font-weight: 400;
  margin: 4% auto;
}
.post-h-wrapper {
  padding: 0 0 60px;
}
.post-item_h1,.post-item_h2 {
  font-family: "游ゴシック", "Yu Gothic", 'Hiragino Sans', "游明朝", YuGothic, 'Hiragino Kaku Gothic ProN', 'sans-serif';
}
.post-item_h1 {
  color:  rgba(255, 255, 255, 0.5);
  font-size: 9.0rem;
  margin: 0 auto 24px;
  text-align: left;
  line-height: 9.0rem;
}
.post-item_h2 {
  color: #002c5a;
  font-size: 2.4rem;
  margin: 0 auto;
  text-align: left;
  position: relative;
}
img.archive_post-item {
  border-radius: 1em 1em 0 0;
  width: 100%;
  aspect-ratio: 1/0.6;
  object-fit: cover;
}
.post-item-wrapper li {
  list-style: none;
  background-color: #f9f9f9;
  border-radius: 1em;
  box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);
  margin-bottom: 8%;
}
h3 {
  font-size: 2rem;
  align-items: center;
  display: flex;
  justify-content: flex-start;
}
.button-margin {
  margin-right: 2%;
}
.wrapper_sub {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 3%;
  width: 100%;
  padding: 0 4% 4%;
}
.wrapper_sub img {
  width: 100%;
  border-radius: 1em;
  object-fit: cover;
  aspect-ratio: 1/0.7;
}
.wrapper_sub p {
  width: 100%;
  text-align: left;
  margin-top: 3%;
}
.wrapper_sub_li {
  width: 100%;
}
/*========================================================================================
スマホ版　sp style
=========================================================================================*/
@media(max-width:768px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  .category__image {
    height: 50vh;
  }
  .station_image {
    bottom: 40%;
  }
  .st_h1-title {
    line-height: 4.8rem;
    font-size: 3rem;
    letter-spacing: 0.3rem;
  }
  img.brackets {
    width: 0.8rem;
  }
  .st_title-wrapper {
    bottom: 44%;
  }
  .top-illust{
    bottom: 2%;
  }
  .wrapper01{
    padding: 0;
    background-color: #f9f9f9;
    border-radius: 1em 1em 0 0;
  }
  .wrapper01_main{
    display: block;
    margin-bottom: 20px;
  }
  .main_img01{
    width: 100%;
    margin: 0;
  }
  .main_img01 img{
    border-radius: 1em 1em 0 0;
  }
  .st_map.sp {
    width: 100%;
  }
  h4 {
    font-size: 1.6rem;
    margin: 2% auto;
  }
  .discription-wrapper p{
    margin: 0 auto;
  }
  .wrapper01 ul {
    display: block;
    padding: 0 16px 16px;
  }
  .map {
    margin: 0 4%;
  }
  .post-item_h1 {
    font-size: 6rem;
    line-height: 6rem;
    margin: 16px auto;
  }
  .post-item_h1 {
    font-size: 5.2rem;
    line-height: 5.2rem;
    margin: 16px auto;
  }
  .post-item_h1 {
    font-size: 5.2rem;
    line-height: 5.2rem;
    margin: 16px auto;
  }  
  ul.post-item-wrapper {
    margin: 2.4rem auto;
  }
  .box-area {
    padding-bottom: 1%;
    margin-bottom: 40px;
  }
  .discription-wrapper {
    padding: 4%;
  }
  .wrapper_sub {
    padding: 0 4% 4%;
  }
}

/*========================================================================================
スマホ版　sp style
=========================================================================================*/
@media(max-width:425px){
    h1.post-item_h1 {
      font-size: 4rem;
      margin: 0 auto 1rem;
      line-height: 4rem;
    }
    h2.post-item_h2 {
      font-size: 1.8rem;
    }
    h2.station_h2 {
      display: block;
      justify-content: space-between;
      width: 100%;
      white-space: nowrap;
      overflow-x: scroll;
      padding: 0;
    }
    .st_logo2 {
      width: 160px;
    }
    .st_map.sp {
      width: 1000px;
      overflow-x: hidden;
    }
    h3.station_h3 {
      font-size: 2rem;
    }
    .guidance p {
      text-align: center;
    }
    h4 {
      font-size: 1.4rem;
      margin: 0 auto;
    }
    ul.wrapper_sub {
      display: block;
      padding: 0 6% 4%;
    }
    .wrapper_sub p {
      width: 100%;
      text-align: left;
      margin: 10px auto 40px;
    }
    ul.post-item-wrapper {
      display: grid;
      grid-template-columns: repeat(auto-fit,minmax(138px,1fr));
      gap: 4%;
    }
    .post-h-wrapper {
      padding: 20px 0;
    }
    .discription-wrapper {
      padding: 2% 6%;
    }
    .map {
      margin: 0 6% 4%;
    }
}