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

@media screen and (min-width: 737px) {
  #swiper img {
    width: 100%;
    height: auto;
  }
  #swiper {
    width: 100%;
    margin: 0 auto;
  }
  /*========swiper=======*/
  .swiper_area {
    width: 100%;
    margin: 1rem auto;
  }
  /*----------- slide -----------*/
  .container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: auto;
    overflow: hidden;
  }
  .swiper {
    width: 95%;
    height: auto;
    margin: 0 auto;
  }
  .swiper-wrapper {
    max-width: 95% !important;
    position: relative;
    padding-bottom: .5rem;
  }
  .swiper-slide {
    width: 100%;
    height: 100%;
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .swiper-scrollbar {
    top: 0px; /* 上からの位置 */
    left: 2.5% !important; /* 左からの位置 */
    width: 95% !important; /* スクロールバーの横幅 */
    margin-bottom: .5rem;
  }
  .swiper-scrollbar .swiper-scrollbar-drag {
    border-radius: 100px;
  }
  .swiper-button-prev {
    position: absolute;
    top: 50%;
    left: 0;
    color: #313131;
    z-index: 100;
    opacity: 1 !important;
  }
  .swiper-button-next {
    position: absolute;
    top: 50%;
    right: 0;
    color: #313131;
    z-index: 100;
    opacity: 1 !important;
  }
  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
  }
  .era {
    width: 95%;
    margin: 0 auto;
  }
  .swiper_area figure {
    width: 100%;
    margin: .5rem auto;
    background-color: #fff;
    padding: 1px;
    box-sizing: border-box;
    overflow: hidden;
  }
}

@media screen and (max-width:736px) {
  #swiper img {
    width: 100%;
    height: auto;
  }

  /*========swiper=======*/
  .swiper_area {
    width: 100%;
    margin: 1rem auto;
  }
  /*----------- slide -----------*/
  .container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: auto;
    overflow: hidden;
  }
  .swiper {
    width: 90%;
    height: auto;
    margin: 0 4%;
  }
  .swiper-wrapper {
    max-width: 90% !important;
    padding-bottom: .5rem;
  }
  .swiper-slide {
    width: 100%;
    height: 100%;
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .swiper-scrollbar {
    top: 0px;
    left: 6% !important;
    width: 88% !important;
    z-index: 10;
    margin-bottom: .5rem;
  }
  .swiper-scrollbar .swiper-scrollbar-drag {
    border-radius: 100px;
  }
  .swiper-button-prev {
    position: absolute;
    top: 50%;
    left: 0;
    color: #313131;
    z-index: 100;
    opacity: 1 !important;
  }
  .swiper-button-next {
    position: absolute;
    top: 50%;
    right: 0;
    color: #313131;
    z-index: 100;
    opacity: 1 !important;
  }
  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
  }
  .era {
    width: 95%;
    margin: 0 auto;
  }
  .swiper_area figure {
    width: 100%;
    margin: .5rem auto;
    background-color: #fff;
    padding: 1px;
    box-sizing: border-box;
    overflow: hidden;
  }
}