@charset "UTF-8";
/* CSS INFORMATION =====================================================
File name : top.css
Description : トップページ
===================================================================== */
/* ========================================================
    mv
======================================================== */
.mv {
  height: 75rem;
  background-image: url(../images/common/mv_top_sp.png);
}
@media screen and (min-width: 768px) {
  .mv {
    height: 48rem;
    background-image: url(../images/common/mv_top_pc.png);
  }
}
.mv_column {
  align-items: center;
  justify-content: center;
  gap: 2rem 0;
  padding-top: 51rem;
}
@media screen and (min-width: 768px) {
  .mv_column {
    align-items: flex-end;
    flex-direction: row;
    gap: 0 6rem;
    padding-top: 35.6rem;
    width: 100%;
  }
}
.mv_ttl {
  width: 56.5rem;
}
@media screen and (min-width: 768px) {
  .mv_ttl {
    margin: 0;
    width: 48.8rem;
  }
}
.mv_ttl > a {
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .mv_onair {
    width: 53.5rem;
  }
}

/* ========================================================
    topbnr
======================================================== */
.topbnr {
  position: relative;
  width: 100%;
  padding: 4rem 0;
  background-color: #ffffff;
}
.topbnr::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(-8rem + 1px);
  display: block;
  width: 100%;
  height: 8rem;
  background-image: url(../images/common/common_bg01.png);
  background-repeat: repeat-x;
  background-position: center center;
  background-size: 16rem 8rem;
  transform: scale(1, 1);
  z-index: 1;
}
.topbnr_slider {
  opacity: 0;
}
.topbnr_slider.slick-initialized {
  opacity: 1;
}
.topbnr_slider.slick-slider {
  position: relative;
  width: 100%;
  padding-bottom: 4.5rem;
  z-index: 3;
}
.topbnr_slider.slick-slider * {
  line-height: 1;
}
.topbnr_slider.slick-slider .slick-slide {
  width: 40rem;
  margin: 0 2rem;
}
.topbnr_slider.slick-slider .slick-prev {
  position: absolute;
  left: 1.6rem;
  top: 19.3rem;
  display: block;
  width: 6.4rem;
  height: 6.4rem;
  font-size: 0;
  background-image: url(../images/common/btn_slider.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: scale(1, 1);
  transition: 0.3s ease;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .topbnr_slider.slick-slider .slick-prev {
    top: 18.5rem;
    width: 8rem;
    height: 8rem;
  }
}
@media screen and (min-width: 1400px) {
  .topbnr_slider.slick-slider .slick-prev {
    left: calc(50% - 70rem);
  }
}
@media screen and (min-width: 768px) {
  .topbnr_slider.slick-slider .slick-prev:hover {
    left: 0.6rem;
  }
}
@media screen and (min-width: 1400px) {
  .topbnr_slider.slick-slider .slick-prev:hover {
    left: calc(50% - 71rem);
  }
}
.topbnr_slider.slick-slider .slick-next {
  position: absolute;
  right: 1.6rem;
  top: 19.3rem;
  display: block;
  width: 6.4rem;
  height: 6.4rem;
  font-size: 0;
  background-image: url(../images/common/btn_slider.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: scale(-1, 1);
  transition: 0.3s ease;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .topbnr_slider.slick-slider .slick-next {
    top: 18.5rem;
    width: 8rem;
    height: 8rem;
  }
}
@media screen and (min-width: 1400px) {
  .topbnr_slider.slick-slider .slick-next {
    right: calc(50% - 70rem);
  }
}
@media screen and (min-width: 768px) {
  .topbnr_slider.slick-slider .slick-next:hover {
    right: 0.6rem;
  }
}
@media screen and (min-width: 1400px) {
  .topbnr_slider.slick-slider .slick-next:hover {
    right: calc(50% - 71rem);
  }
}
.topbnr_slider.slick-slider .slick-dots {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0 2.4rem;
  width: auto;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .topbnr_slider.slick-slider .slick-dots {
    gap: 0 1.8rem;
  }
}
.topbnr_slider.slick-slider .slick-dots > li {
  width: 1.6rem;
  height: 1.6rem;
}
@media screen and (min-width: 768px) {
  .topbnr_slider.slick-slider .slick-dots > li {
    width: 1.2rem;
    height: 1.2rem;
  }
}
.topbnr_slider.slick-slider .slick-dots > li.slick-active button {
  background-color: #ff2200;
}
.topbnr_slider.slick-slider .slick-dots > li button {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 0;
  border-radius: 50%;
  background-color: #0069d7;
  box-shadow: 0 0 0 0.3rem #ffffff;
}

/* ========================================================
    backnumber
======================================================== */
.backnumber {
  position: relative;
  width: 100%;
  padding: 30rem 0 22rem 0;
  background-color: #f2ede6;
}
@media screen and (min-width: 768px) {
  .backnumber {
    padding: 24rem 0 16rem 0;
  }
}
.backnumber::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8rem;
  display: block;
  width: 100%;
  height: 8rem;
  background-image: url(../images/common/common_bg05.png);
  background-repeat: repeat-x;
  background-position: center center;
  background-size: 16rem 8rem;
  transform: scale(1, 1);
  z-index: 1;
}
.backnumber_ttl {
  position: relative;
  color: #0069d7;
  font-size: 6.4rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .backnumber_ttl {
    font-size: 4.8rem;
  }
}
.backnumber_ttl > span {
  color: #ff2200;
}
.backnumber_column {
  position: relative;
  width: 100%;
  margin: 6rem auto 0 auto;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .backnumber_column {
    width: 68.75%;
    margin: 3rem auto 0 auto;
  }
}
.backnumber_list {
  position: relative;
  width: 100%;
  padding: 4rem;
  border-radius: 2rem;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  .backnumber_list {
    padding: 3rem 8rem;
  }
}
.backnumber_list > li {
  position: relative;
  padding: 4rem 0 4rem 1.5em;
  font-size: 3rem;
  font-weight: 700;
  transform: rotate(0.03deg);
}
@media screen and (min-width: 768px) {
  .backnumber_list > li {
    padding: 3rem 0 3rem 1.5em;
    font-size: 2.4rem;
  }
}
.backnumber_list > li::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 4rem;
  display: block;
  color: #ff2200;
}
@media screen and (min-width: 768px) {
  .backnumber_list > li::before {
    top: 3rem;
  }
}
.backnumber_list > li::after {
  content: none;
  position: absolute;
  left: 0;
  top: -0.3rem;
  display: block;
  width: 100%;
  height: 0.6rem;
  background-image: url(../images/common/common_bg06.png);
  background-repeat: repeat-x;
  background-position: left top;
  background-size: 2.4rem 0.6rem;
}
@media screen and (min-width: 768px) {
  .backnumber_list > li::after {
    top: -0.2rem;
    height: 0.4rem;
    background-size: 1.6rem 0.4rem;
  }
}
.backnumber_list > li + li::after {
  content: "";
}
.backnumber_btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 3rem 0;
  width: 100%;
  margin-top: 8rem;
}
@media screen and (min-width: 768px) {
  .backnumber_btn {
    flex-direction: row;
    gap: 0 4.5454545455%;
    margin-top: 6rem;
  }
}
@media screen and (min-width: 768px) {
  .backnumber_btn .btn_wrap {
    width: 47.7272727273%;
  }
}
.backnumber_line_img01 {
  position: absolute;
  left: 28rem;
  top: -14rem;
  display: block;
  width: 81.6rem;
  height: 43.2rem;
  background-image: url(../images/common/line_img01.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .backnumber_line_img01 {
    left: calc(50% + 22.5rem);
  }
}
.backnumber_line_img02 {
  position: absolute;
  right: 28rem;
  bottom: -18rem;
  display: block;
  width: 97.6rem;
  height: 75.2rem;
  background-image: url(../images/common/line_img02.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .backnumber_line_img02 {
    right: calc(50% + 22.5rem);
  }
}

/* ========================================================
    youtube
======================================================== */
.youtube {
  position: relative;
  width: 100%;
  padding: 28rem 0 20rem 0;
}
@media screen and (min-width: 768px) {
  .youtube {
    padding: 24rem 0 16rem 0;
  }
}
.youtube::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #0069d7;
  z-index: -2;
}
.youtube::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(-32.2rem + 1px);
  display: block;
  width: 100%;
  height: 32.2rem;
  background-image: url(../images/common/common_bg03_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .youtube::after {
    background-image: url(../images/common/common_bg03_pc.png);
    background-size: auto 100%;
  }
}
@media screen and (min-width: 1920px) {
  .youtube::after {
    background-size: 100% 100%;
  }
}
.youtube_column {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6rem 0;
  width: 100%;
  margin: 0 auto;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .youtube_column {
    gap: 0 0;
  }
}
.youtube_ttl {
  position: relative;
  width: 100%;
  color: #ffea00;
  font-size: 6.4rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .youtube_ttl {
    width: 31.25%;
    font-size: 4.8rem;
  }
}
.youtube_movie {
  position: relative;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .youtube_movie {
    width: 68.75%;
  }
}
.youtube_movie_inner {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 2rem;
  overflow: hidden;
}
.youtube_movie_inner iframe {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.youtube_illust01 {
  position: absolute;
  left: 0;
  top: inherit;
  bottom: 1.5rem;
  display: block;
  width: 100%;
  height: 69.7rem;
  background-image: url(../images/top/youtube_illust01_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .youtube_illust01 {
    top: 0;
    bottom: inherit;
    height: 89.5rem;
    background-image: url(../images/top/youtube_illust01_pc.png);
    background-size: auto 100%;
  }
}
@media screen and (min-width: 1920px) {
  .youtube_illust01 {
    background-size: 100% 100%;
  }
}

/* ========================================================
    timetable
======================================================== */
.timetable {
  position: relative;
  width: 100%;
  padding: 20rem 0;
  background-color: #f2ede6;
}
@media screen and (min-width: 768px) {
  .timetable {
    padding: 16rem 0;
  }
}
.timetable_ttl {
  position: relative;
  color: #ff2200;
  font-size: 6.4rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .timetable_ttl {
    font-size: 4.8rem;
  }
}
.timetable_column {
  position: relative;
  width: 100%;
  margin: 6rem auto 0 auto;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .timetable_column {
    width: 69.375%;
    margin: 3rem auto 0 auto;
  }
}
.timetable_program {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6rem 0;
  width: 100%;
}
@media screen and (min-width: 1080px) {
  .timetable_program {
    gap: 0 0;
  }
}
.timetable_cematin {
  position: relative;
  width: 100%;
  padding: 8rem 4rem 5.5rem 4rem;
  border-radius: 2rem;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  .timetable_cematin {
    padding: 6rem 4rem 5rem 4rem;
  }
}
@media screen and (min-width: 1080px) {
  .timetable_cematin {
    width: 47.7477477477%;
  }
}
.timetable_cematin::before {
  content: "";
  position: absolute;
  left: -1.6rem;
  bottom: -1.6rem;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3rem;
  background-color: #ff2200;
  z-index: -1;
}
.timetable_cematin .timetable_subttl {
  color: #ff2200;
}
.timetable_cematin .timetable_detail > dt {
  color: #ff2200;
}
.timetable_zip {
  position: relative;
  width: 100%;
  padding: 8rem 4rem 5.5rem 4rem;
  border-radius: 2rem;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  .timetable_zip {
    padding: 6rem 4rem 5rem 4rem;
  }
}
@media screen and (min-width: 1080px) {
  .timetable_zip {
    width: 47.7477477477%;
  }
}
.timetable_zip::before {
  content: "";
  position: absolute;
  right: -1.6rem;
  bottom: -1.6rem;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3rem;
  background-color: #0069d7;
  z-index: -1;
}
.timetable_zip .timetable_subttl {
  color: #0069d7;
}
.timetable_zip .timetable_detail > dt {
  color: #0069d7;
}
.timetable_subttl {
  position: relative;
  margin-top: -0.5rem;
  font-size: 4rem;
  font-weight: 900;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .timetable_subttl {
    font-size: 3rem;
  }
}
.timetable_detail {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 1.5rem;
}
.timetable_detail > dt {
  position: relative;
  width: 5em;
  padding: 2.5rem 0;
  font-size: 3rem;
  font-weight: 700;
  transform: rotate(0.03deg);
}
@media screen and (min-width: 768px) {
  .timetable_detail > dt {
    padding: 1rem 0;
    font-size: 1.8rem;
  }
}
.timetable_detail > dd {
  position: relative;
  width: calc(100% - 5em);
  padding: 2.5rem 0;
  font-size: 3rem;
  font-weight: 700;
  transform: rotate(0.03deg);
}
@media screen and (min-width: 768px) {
  .timetable_detail > dd {
    padding: 1rem 0;
    font-size: 1.8rem;
  }
}
.timetable_detail > dd::after {
  content: none;
  position: absolute;
  left: 0;
  bottom: -0.3rem;
  display: block;
  width: 100%;
  height: 0.6rem;
  background-image: url(../images/common/common_bg06.png);
  background-repeat: repeat-x;
  background-position: left top;
  background-size: 2.4rem 0.6rem;
}
@media screen and (min-width: 768px) {
  .timetable_detail > dd::after {
    bottom: -0.2rem;
    height: 0.4rem;
    background-size: 1.6rem 0.4rem;
  }
}
.timetable_detail > dd:has(+ dt)::after {
  content: "";
}
.timetable_btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 3rem 0;
  width: 100%;
  margin-top: 9.6rem;
}
@media screen and (min-width: 768px) {
  .timetable_btn {
    flex-direction: row;
    gap: 0 4.5045045045%;
    margin-top: 7.6rem;
  }
}
@media screen and (min-width: 768px) {
  .timetable_btn .btn_wrap {
    width: 47.2972972973%;
  }
}
.timetable_line_img03 {
  position: absolute;
  right: 28rem;
  top: -9.7rem;
  display: block;
  width: 81.7rem;
  height: 59.2rem;
  background-image: url(../images/common/line_img03.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .timetable_line_img03 {
    right: calc(50% + 22.5rem);
  }
}
.timetable_line_img04 {
  position: absolute;
  left: 24rem;
  bottom: -9.7rem;
  display: block;
  width: 85.5rem;
  height: 83.2rem;
  background-image: url(../images/common/line_img04.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .timetable_line_img04 {
    left: calc(50% + 18.5rem);
  }
}

.program_wrap {
  display: flex;
  flex-direction: column;
}

.timetable_program2 {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.timetable_cematin2 {
  display: flex;
  flex-direction: column;
  width: 96%;
  margin-bottom: 2em;
}

.timetable_zip2 {
  display: flex;
  flex-wrap: nowrap;
  width: 96%;
  flex-direction: column;
}

@media screen and (min-width: 1080px) {
  .program_wrap {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
  }
  .timetable_program2 {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .timetable_cematin2 {
    display: flex;
    flex-direction: column;
    width: 96%;
    margin-bottom: 2em;
  }
  .timetable_zip2 {
    display: flex;
    flex-wrap: nowrap;
    width: 96%;
  }
}
/* ========================================================
    present
======================================================== */
.present {
  position: relative;
  width: 100%;
  padding: 20rem 0 24rem 0;
}
@media screen and (min-width: 768px) {
  .present {
    padding: 16rem 0 20rem 0;
  }
}
.present::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ff2200;
  z-index: -2;
}
.present::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-32.2rem + 1px);
  display: block;
  width: 100%;
  height: 32.2rem;
  background-image: url(../images/common/common_bg04_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .present::after {
    background-image: url(../images/common/common_bg04_pc.png);
    background-size: auto 100%;
  }
}
@media screen and (min-width: 1920px) {
  .present::after {
    background-size: 100% 100%;
  }
}
.present_ttl {
  position: relative;
  color: #ffea00;
  font-size: 6.4rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .present_ttl {
    font-size: 4.8rem;
  }
}
.present_column {
  position: relative;
  width: 100%;
  margin: 6rem auto 0 auto;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .present_column {
    width: 69.375%;
    margin: 3rem auto 0 auto;
  }
}
.present_list {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3rem 0;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .present_list {
    gap: 3rem 4.5045045045%;
  }
}
.present_list > li {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .present_list > li {
    width: 47.7477477477%;
  }
}
.present_illust01 {
  position: absolute;
  left: 0;
  top: inherit;
  bottom: 4rem;
  display: block;
  width: 100%;
  height: 85.6rem;
  background-image: url(../images/top/present_illust01_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .present_illust01 {
    top: 0;
    bottom: inherit;
    height: 64.1rem;
    background-image: url(../images/top/present_illust01_pc.png);
    background-size: auto 100%;
  }
}
@media screen and (min-width: 1920px) {
  .present_illust01 {
    background-size: 100% 100%;
  }
}

/* ========================================================
    special
======================================================== */
.special {
  position: relative;
  width: 100%;
  padding: 20rem 0 28rem 0;
  border-radius: 22rem;
  background-color: #f2ede6;
}
.special::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 56%;
  background-color: #ff2200;
  z-index: -1;
}
.special::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 56%;
  background-color: #0069d7;
  z-index: -1;
}
.special_ttl {
  position: relative;
  color: #0069d7;
  font-size: 6.4rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .special_ttl {
    font-size: 4.8rem;
  }
}
.special_column {
  position: relative;
  width: 100%;
  margin: 6rem auto 0 auto;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .special_column {
    width: 84.375%;
    margin: 3rem auto 0 auto;
  }
}
.special_list {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3rem 0;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .special_list {
    gap: 3rem 3.7037037037%;
  }
}
.special_list > li {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .special_list > li {
    width: 48.1481481481%;
  }
}
.special_illust01 {
  position: absolute;
  left: 0;
  bottom: -2rem;
  display: block;
  width: 100%;
  height: 20rem;
  background-image: url(../images/top/special_illust01.png);
  background-repeat: repeat-x;
  background-position: center center;
  background-size: 35.8rem 20rem;
  z-index: 1;
}

/* ========================================================
    sns
======================================================== */
.sns {
  position: relative;
  width: 100%;
  padding: 24rem 0;
}
@media screen and (min-width: 768px) {
  .sns {
    padding: 20rem 0;
  }
}
.sns::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #0069d7;
  z-index: -2;
}
.sns::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(-8rem + 1px);
  display: block;
  width: 100%;
  height: 8rem;
  background-image: url(../images/common/common_bg02.png);
  background-repeat: repeat-x;
  background-position: center center;
  background-size: 16rem 8rem;
  transform: scale(1, 1);
  z-index: 1;
}
.sns_column {
  position: relative;
  width: 100%;
  margin: 0 auto;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .sns_column {
    width: 84.375%;
  }
}
.sns_ttl {
  position: relative;
  width: 100%;
  color: #ffea00;
  font-size: 6.4rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .sns_ttl {
    position: absolute;
    left: 0;
    bottom: 69.4444444444%;
    width: 38.8888888889%;
    font-size: 4.8rem;
    text-align: center;
  }
}
.sns_list {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  width: 100%;
  gap: 8rem 0;
  margin-top: 6rem;
}
@media screen and (min-width: 768px) {
  .sns_list {
    gap: 0 0;
    margin-top: 0;
  }
}
.sns_widget {
  position: relative;
  width: 100%;
  height: 68rem;
  border-radius: 2rem;
  background-color: #ffffff;
}
@media screen and (min-width: 768px) {
  .sns_widget {
    width: 55.5555555556%;
    height: 44rem;
  }
}
.sns_widget .twitter-timeline {
  position: absolute;
  left: 4rem;
  right: 4rem;
  top: 6rem;
  bottom: 6rem;
  display: block;
  width: calc(100% - 8rem);
  height: calc(100% - 12rem);
  overflow-y: auto;
}
.sns_btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 3rem 0;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .sns_btn {
    width: 38.8888888889%;
  }
}
@media screen and (min-width: 768px) {
  .sns_btn .btn_wrap {
    width: 100%;
  }
}
.sns_illust01 {
  position: absolute;
  left: 0;
  top: 8rem;
  display: block;
  width: 100%;
  height: 151.6rem;
  background-image: url(../images/top/sns_illust01_sp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .sns_illust01 {
    top: 4rem;
    height: 74.8rem;
    background-image: url(../images/top/sns_illust01_pc.png);
    background-size: auto 100%;
  }
}
@media screen and (min-width: 1920px) {
  .sns_illust01 {
    background-size: 100% 100%;
  }
}

.balloon {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #000;
  font-size: 0.8em;
  background: #ffea00;
  border-radius: 30px;
  text-align: center;
}

.balloon:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #ffea00;
}/*# sourceMappingURL=top.css.map *//