@charset "UTF-8";

/* ==========================================================================

	TOP

========================================================================== */

/*--------------------------------
    基本レイアウト
--------------------------------*/
main {
  padding-top: 0;
}

/*--------------------------------
    バッジ
--------------------------------*/

#badge {
  position: fixed;
  z-index: 2;
  bottom:50px;
  right: 50px;
}

#badge a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.7rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: #fff;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  transform:rotate(15deg);
}

#badge a:link,
#badge a:visited {
  color: var(--color-nega);
  background-color:var(--color-highlight);
}
@media only screen and (min-width: 813px) {
  #badge a:hover,
  #badge a:active {
    background-color: var(--color-primary);
    transform: scale(1.1);
  }
}
@media only screen and (max-width: 812px) {
  #badge {
    bottom:10px;
    right: 10px;
  }

  #badge a {
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    width: 100px;
    height: 100px;
  }
}

/*--------------------------------
    LINEバナー
--------------------------------*/

#LINE {
  position: fixed;
  z-index: 2;
  bottom:50px;
  left: 50px;
}

#LINE a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  width: 240px;
  height: auto;
  background-color: #06c755;
  border-radius: 20px;
  padding: 1em;
}

#LINE a em {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: #fff;
  text-align: center;
  margin: 0 auto 1em;
}

#LINE a img {
  width: 80px;
  height: auto;
}

#LINE a span {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #fff;
  text-align: center;
  margin: 1em auto 0;
}

@media only screen and (max-width: 812px) {
  #LINE {
    bottom:10px;
    left: 10px;
  }

  #LINE a {
    letter-spacing: 0.04em;
    width: auto;
    height: auto;
    border-radius: 10px;
    padding: 0.8em;
  }

  #LINE a em {
    font-size: 1.2rem;
    margin: 0 auto;
  }

  #LINE a img {
    display: none;
  }

  #LINE a span {
    display: none;
    /* font-size: 1.0rem;
    margin: 0.5em auto 0; */
  }
}

/*--------------------------------
    メインビジュアル
--------------------------------*/
#mainvisual {
  position: relative;
  width: 100%;
  /* height: 100vh; */
  /* height: 100dvh; */
  /* height: 100svh; */
  text-align: center;
  padding: 0;
  margin: 120px auto 10rem;
  transition: 0.4s;
}

/* スライドショー */
#mainvisual .topSlider {
  width: 100%;
  height: 100%;
}

#mainvisual .topSlider .slick-list,
#mainvisual .topSlider .slick-track,
#mainvisual .topSlider .slick-slide,
#mainvisual .topSlider .slick-slide > div,
#mainvisual .topSlider .slick-slide > div picture {
  width: 100%;
  height: 100%;
}
#mainvisual .topSlider .slide_img {
  padding: 0 1.5vw;
}
#mainvisual .topSlider .slide_img picture {
  display: block;
  aspect-ratio: 3/2;
  overflow: hidden;
}
#mainvisual .topSlider .slide_img picture img {
  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
#mainvisual .topSlider .slide_img .slide_title {
  font-size: 1.8rem;
  font-size: min(1.8rem, 20px);
  line-height: 1.5;
  font-weight: 600;
  margin-top: 1.5em;
}

/* dots */
#mainvisual .topSlider .slick-dots {
  padding: 0 30px;
  bottom: 100px;
  text-align: right;
}

#mainvisual .topSlider .slick-dots li {
  display: block;
}

@media only screen and (max-width: 812px) {
  #mainvisual {
    margin: 80px auto 0;
  }
  #mainvisual .topSlider .slide_img .slide_title {
    font-size: 1.5rem;
    margin-top: 1.0em;
    padding: 0 1em;
  }

  /* dots */
  #mainvisual .topSlider .slick-dots {
    display: none !important;
  }

}