@charset "UTF-8";
/*=================================
header
=================================*/
.logo {
  padding: 2.5em 4em;
}
.logo h1 {
  color: #f65751;
  font-size: 3em;
}
@media (max-width: 1700px) {
  .logo h1 {
    font-size: 2.5em;
  }
}
@media (max-width: 1500px) {
  .logo h1 {
    font-size: 2em;
  }
}
@media (max-width: 1200px) {
  .logo h1 {
    font-size: 1.6em;
  }
}
@media (max-width: 768px) {
  .logo h1 {
    font-size: 1.3em;
  }
}
@media (max-width: 550px) {
  .logo h1 {
    line-height: 1.2em;
  }
}
@media (max-width: 425px) {
  .logo h1 {
    font-size: 1.1em;
  }
}
@media (max-width: 1700px) {
  .logo {
    padding: 2em 3.3em;
  }
}
@media (max-width: 1200px) {
  .logo {
    padding: 1.5em 3em;
  }
}
@media (max-width: 768px) {
  .logo {
    padding: 1em 1.5em;
  }
}
@media (max-width: 550px) {
  .logo {
    padding: 0.5em 1em;
  }
}
.logo span {
  font-size: 1.4em;
}
@media (max-width: 1700px) {
  .logo span {
    font-size: 1.3em;
  }
}
@media (max-width: 1500px) {
  .logo span {
    font-size: 1.2em;
  }
}
@media (max-width: 768px) {
  .logo span {
    font-size: 0.9em;
  }
}

/*=================================
main
=================================*/
main .bg_img {
  position: relative;
  margin-bottom: -234px;
}
@media (max-width: 1700px) {
  main .bg_img {
    margin-bottom: -13.2vw;
  }
}
@media (max-width: 1200px) {
  main .bg_img {
    margin-bottom: -18vw;
  }
}
@media (max-width: 768px) {
  main .bg_img {
    margin-bottom: -24.5vw;
  }
}
main .bg_img img {
  width: 100%;
}
@media (max-width: 768px) {
  main .bg_img img {
    height: 90vw;
    object-fit: cover;
  }
}
@media (max-width: 550px) {
  main .bg_img img {
    height: 120vw;
  }
}
@media (max-width: 425px) {
  main .bg_img img {
    height: 150vw;
  }
}
main .bg_img .slogan {
  position: absolute;
  top: 37%;
  right: 15%;
  color: #ffffff;
  text-align: right;
  padding-right: 3em;
  margin-bottom: 2em;
  font-size: 2em;
  font-weight: 500;
  line-height: 1.5em;
  filter: drop-shadow(0px 0px 3px #aaa);
}
@media (max-width: 1700px) {
  main .bg_img .slogan {
    top: 39%;
  }
}
@media (max-width: 768px) {
  main .bg_img .slogan {
    right: 0;
    font-size: 4.5vw;
  }
}
@media (max-width: 550px) {
  main .bg_img .slogan {
    top: 45%;
  }
}
@media (max-width: 425px) {
  main .bg_img .slogan {
    font-size: 5vw;
  }
}

@media (max-width: 1700px) {
  .c_box .area_list_box {
    flex-direction: column;
    padding: 3%;
  }
  .c_box .area_list_box ul {
    max-width: 100%;
    padding: 0 2em;
  }
}
@media (max-width: 1700px) and (max-width: 768px) {
  .c_box .area_list_box ul {
    padding: 0 1em;
  }
}
@media (max-width: 768px) {
  .c_box .area_list_box {
    padding: 1em 3%;
  }
}

/*---swiper---*/
.swiper {
  position: relative;
  width: 100%;
  height: 400px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  margin-bottom: 2em;
}
@media (max-width: 1700px) {
  .swiper {
    height: 23vw;
  }
}
@media (max-width: 1200px) {
  .swiper {
    height: 31vw;
  }
}
@media (max-width: 550px) {
  .swiper {
    height: 36vw;
  }
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  padding: 0 4%;
}
@media (max-width: 550px) {
  .swiper-slide {
    padding: 0;
  }
}

.swiper-slide > a {
  height: 86%;
  width: 96%;
}

.swiper-slide > a > img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.swiper-button-prev,
.swiper-button-next {
  color: #ffffff; /* ← ボタンの色を指定しないと見えない場合あり */
  background-color: #5c5c5c;
  border-radius: 4px;
  width: 30px;
  height: 50px;
}
@media (max-width: 550px) {
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 60px;
  width: 20px;
  height: 40px;
  font-weight: bold;
  color: #ffffff;
  transition: all 0.1s;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  opacity: 0.8;
}

.swiper-button-prev::after {
  content: "‹"; /* 左矢印 */
}

.swiper-button-next::after {
  content: "›"; /* 右矢印 */
  margin-right: 4px;
}

.swiper-horizontal .swiper-button-prev, .swiper-horizontal ~ .swiper-button-prev, .swiper-horizontal.swiper-rtl .swiper-button-next, .swiper-horizontal.swiper-rtl ~ .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}
.swiper-horizontal .swiper-button-next, .swiper-horizontal ~ .swiper-button-next, .swiper-horizontal.swiper-rtl .swiper-button-prev, .swiper-horizontal.swiper-rtl ~ .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 40px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
@media (max-width: 550px) {
  .swiper-pagination-fraction,
  .swiper-pagination-custom,
  .swiper-horizontal > .swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: var(--swiper-pagination-bottom, 25px);
  }
}

.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
}
.swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}
.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: var(--swiper-scrollbar-sides-offset, 5%);
  bottom: var(--swiper-scrollbar-bottom, 30px);
  top: var(--swiper-scrollbar-top, auto);
  z-index: 50;
  height: var(--swiper-scrollbar-size, 4px);
  width: calc(100% - 10 * var(--swiper-scrollbar-sides-offset, 1%));
}
@media (max-width: 550px) {
  .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
    bottom: var(--swiper-scrollbar-bottom, 20px);
  }
}
.swiper-vertical > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-vertical {
  position: absolute;
  left: var(--swiper-scrollbar-left, auto);
  right: var(--swiper-scrollbar-right, 4px);
  top: var(--swiper-scrollbar-sides-offset, 1%);
  z-index: 50;
  width: var(--swiper-scrollbar-size, 4px);
  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}

/*---swiper end---*/

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