/*====================================================================================
START TABLE OF CONTENT

1. START COMMON ONLY TOP PAGE.
2. START MAIN VISUAL SECTION.
3. START SECTION TOP INTRODUCTION.
4. START SECTION TOP LOCATION.
5. START SECTION TOP SCENE.
6. START SECTION TOP USE.
7. START SECTION TOP TOPICS.

/*====================================================================================
1. START COMMON ONLY TOP PAGE.
====================================================================================*/
/*---------- START TAG TOP ----------*/
.tag-top__wrap {
  display: inline-block;
  padding: 0.5rem 1.5rem 0.6rem 1.5rem;
  border-radius: 1rem;
  background-color: var(--color-black);
}
.tag-top__text {
  color: var(--color-white);
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 700;
}

@media only screen and (max-width: 767px) {
  .tag-top__wrap {
    border-radius: 0.8rem;
  }
  .tag-top__text {
    font-size: 1.6rem;
  }
}
/*---------- START TITLE PAGE VISUAL ----------*/
.title-mv__text {
  display: block;
  color: var(--color-white);
  font-weight: 900;
}
.title-mv__text strong {
  color: var(--color-pink);
  font-weight: 900;
}

@media only screen and (max-width: 575px) {
  .title-mv__text {
    margin-top: 2.5rem;
  }
  .title-mv__text:first-child {
    margin-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .title-mv__text {
    font-size: 2.3rem;
    line-height: 1.1;
    letter-spacing: normal;
  }
  .title-mv__text strong {
    font-size: 3.8rem;
    letter-spacing: 0.03em;
  }
}
@media only screen and (min-width: 768px) {
  .title-mv__text {
    font-size: clamp(4rem, 0.3415rem + 3.0513vw, 6.2rem);
    line-height: 1.35;
    letter-spacing: 0.06em;
  }
  .title-mv__text strong {
    font-size: clamp(5rem, -0.3215rem + 4.4383vw, 8.2rem);
    letter-spacing: 0.1em;
  }
}
/*====================================================================================
2. START MAIN VISUAL SECTION.
====================================================================================*/
/*---------- START MAIN VISUAL ----------*/
.mv__wrap {
  position: relative;
}
.mv__bg img {
  width: 100%;
}
.mv__outer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.mv .container {
  height: 100%;
}
.mv__row {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mv__text {
  margin-top: 2rem;
  color: var(--color-white);
  font-weight: 700;
}
.mv__img {
  position: relative;
  z-index: 2;
  text-align: right;
}

@media only screen and (max-width: 575px) {
  .mv__bg img {
    border-radius: 0 0 0 75vw;
  }
  .mv__row {
    padding-bottom: 40vw;
  }
  .mv__inner {
    text-align: center;
  }
  .mv__img {
    margin-top: -31.5vw;
    padding-left: 1rem;
  }
}
@media only screen and (min-width: 576px) {
  .mv__bg img {
    border-radius: 0 0 36vw 36vw;
  }
  .mv__row {
    padding-bottom: 17vw;
  }
  .mv__img img {
    max-width: 60.5vw;
    height: auto;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .mv__img {
    margin-top: -14vw;
  }
}
@media only screen and (max-width: 767px) {
  .mv__bg img {
    object-fit: cover;
  }
  .mv__text {
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 768px) {
  .mv__inner {
    min-width: clamp(61rem, 1.1331rem + 49.9307vw, 97rem);
  }
  .mv__text {
    font-size: clamp(1.6rem, -0.063rem + 1.387vw, 2.6rem);
    letter-spacing: 0.075em;
  }
  .mv__img {
    margin-top: -14vw;
    padding-left: 0.5rem;
  }
}
/*====================================================================================
3. START SECTION TOP INTRODUCTION.
====================================================================================*/
.top-intro__text {
  font-size: 3rem;
  font-weight: 700;
}
.top-intro__title {
  color: var(--color-pink);
  line-height: 1.25;
  font-weight: 900;
}
.top-intro__title strong {
  font-weight: 900;
}

@media only screen and (max-width: 767px) {
  .top-intro {
    padding: 3.5rem 1.5rem 0 1.5rem;
  }
  .top-intro__text, .top-intro__title {
    text-align: center;
  }
  .top-intro__text {
    font-size: 1.8rem;
  }
  .top-intro__title {
    font-size: 2.2rem;
  }
  .top-intro__title strong {
    font-size: 2.8rem;
  }
  .top-intro__desc {
    margin-top: 2.5rem;
  }
  .top-intro__btn {
    margin-top: 3rem;
    text-align: center;
  }
  .top-intro__img {
    text-align: center;
  }
  .top-intro__img img {
    border-radius: 17.5rem;
  }
  .top-intro__img--lg {
    margin-top: 3rem;
  }
  .top-intro__img--md {
    margin-top: 5rem;
  }
}
@media only screen and (min-width: 768px) {
  .top-intro {
    display: flex;
  }
  .top-intro__left {
    width: calc(50% - 27rem);
  }
  .top-intro__right {
    flex: 1;
    min-width: 1px;
    padding-left: 5rem;
  }
  .top-intro__body {
    width: 100%;
    max-width: 79.5rem;
    padding-right: 1.5rem;
  }
  .top-intro__title {
    margin-left: -0.25em;
    padding-left: 0.2em;
    text-indent: -0.25em;
    font-size: 4rem;
    letter-spacing: 0.03em;
  }
  .top-intro__title strong {
    font-size: 5rem;
  }
  .top-intro__desc {
    margin-top: 2.4rem;
  }
  .top-intro__btn {
    margin-top: 6.5rem;
  }
  .top-intro__img--lg img {
    object-fit: cover;
    object-position: right center;
    border-radius: 0 32rem 32rem 0;
  }
  .top-intro__img--md {
    padding-right: 5rem;
    text-align: right;
  }
  .top-intro__img--md img {
    border-radius: 17.5rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1299px) {
  .top-intro__left {
    width: calc(50% - 8rem);
  }
  .top-intro__img--lg img {
    height: 55rem;
  }
  .top-intro__img--md {
    margin-top: 10rem;
  }
}
@media only screen and (min-width: 1300px) {
  .top-intro {
    display: flex;
  }
  .top-intro__left {
    width: calc(50% - 27rem);
  }
  .top-intro__img--lg img {
    height: 64.1rem;
  }
  .top-intro__img--md {
    margin-top: 13.7rem;
  }
}
/*====================================================================================
4. START SECTION TOP LOCATION.
====================================================================================*/
/*---------- START POSTS TOP ----------*/
.posts-top {
  position: relative;
  display: block;
  text-decoration: none;
}
.posts-top__img {
  text-align: center;
}
.posts-top__title {
  font-size: 3rem;
  font-weight: 700;
}
.posts-top__desc {
  margin-top: 1.1rem;
}
.posts-top .link {
  position: absolute;
}

@media only screen and (max-width: 767px) {
  .posts-top {
    padding: 4rem 2rem 7.5rem 2rem;
    border-radius: 5rem;
    background: var(--color-pink-gradient);
  }
  .posts-top::before {
    border-radius: 5rem;
  }
  .posts-top__img {
    margin-bottom: 3rem;
  }
  .posts-top .tag-top {
    margin-bottom: 1rem;
  }
  .posts-top .link {
    right: 2rem;
    bottom: 2rem;
  }
  .posts-top__title {
    font-size: 2.3rem;
    letter-spacing: 0.03em;
  }
}
@media only screen and (min-width: 768px) {
  .posts-top {
    padding: 10rem 3rem 16.5rem 3rem;
  }
  .posts-top__img {
    margin-bottom: 5.5rem;
  }
  .posts-top .tag-top {
    margin-bottom: 0.8rem;
  }
  .posts-top__title {
    letter-spacing: 0.1em;
  }
  .posts-top__desc {
    letter-spacing: 0.08em;
  }
  .posts-top .link {
    right: 3rem;
    bottom: 9rem;
  }
  .posts-top::before {
    position: absolute;
    content: "";
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 9.4rem;
    background: var(--color-pink-gradient);
    transition: top 0.3s ease;
  }
  .posts-top:hover::before {
    top: 19rem;
  }
  .posts-top:hover .link__text {
    background-position: 0 50%;
  }
  .posts-top:hover .circle::before {
    width: 100%;
    height: 100%;
    transition-delay: 0.2s;
  }
  .posts-top:hover .circle__arrow::before {
    opacity: 0;
    transition-delay: 0.2s;
  }
  .posts-top:hover .circle__arrow::after {
    opacity: 1;
    transition-delay: 0.2s;
  }
}
/*---------- START LIST POSTS TOP ----------*/
.list-posts-top .posts-top {
  margin-top: 3rem;
}
.list-posts-top .posts-top:first-child {
  margin-top: 0;
}

@media only screen and (min-width: 576px) {
  .list-posts-top {
    display: flex;
    flex-wrap: wrap;
  }
  .list-posts-top .posts-top:nth-child(2) {
    margin-top: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .list-posts-top .posts-top {
    width: calc(50% - 0.75rem);
    margin-right: 1.5rem;
  }
  .list-posts-top .posts-top:nth-child(even) {
    margin-right: 0;
  }
}
@media only screen and (min-width: 768px) {
  .list-posts-top .posts-top {
    width: calc(33.333% - 2rem);
    margin-right: 3rem;
  }
  .list-posts-top .posts-top:nth-child(3) {
    margin-top: 0;
  }
  .list-posts-top .posts-top:nth-child(3n) {
    margin-right: 0;
  }
}
/*---------- START TOP LOCATION ----------*/
.top-location__desc {
  margin-top: 1.8rem;
}

@media only screen and (max-width: 767px) {
  .top-location__img {
    margin-top: 2rem;
  }
  .top-location__desc {
    margin-top: 2rem;
  }
}
@media only screen and (min-width: 768px) {
  .top-location__row {
    display: flex;
    align-items: flex-end;
  }
  .top-location__left {
    flex: 1;
  }
  .top-location__right {
    width: 47rem;
  }
}
/*====================================================================================
5. START SECTION TOP SCENE.
====================================================================================*/
/*---------- START CARD TOP ----------*/
.card-top {
  position: relative;
  display: block;
  border-radius: 2rem;
  text-decoration: none;
  overflow: hidden;
}
.card-top__img img {
  width: 100%;
  object-fit: cover;
}
.card-top__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
}
.card-top__title {
  margin-bottom: 0.2rem;
  color: var(--color-pink);
  line-height: 1;
  font-weight: 600;
  font-family: var(--font-jost);
}
.card-top__title strong {
  font-weight: 600;
}
.card-top__desc {
  color: var(--color-white);
  font-weight: 700;
}
.card-top .circle {
  position: absolute;
}

@media only screen and (max-width: 767px) {
  .card-top__img img {
    height: 70vw;
    max-height: 28rem;
  }
  .card-top__body {
    padding: 2rem 5.5rem 2rem 1.5rem;
  }
  .card-top__title {
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
  }
  .card-top__title strong {
    font-size: 2.2rem;
  }
  .card-top__desc {
    font-size: clamp(1.4rem, 0.826rem + 1.5306vw, 2rem);
  }
  .card-top .circle {
    right: 1.5rem;
    bottom: 2.2rem;
  }
}
@media only screen and (min-width: 768px) {
  .card-top__img img {
    height: 31.2rem;
  }
  .card-top__body {
    padding: 2.5rem 8.5rem 2.5rem 3.5rem;
  }
  .card-top__title {
    font-size: 1.6rem;
  }
  .card-top__title strong {
    font-size: 2.4rem;
  }
  .card-top__desc {
    font-size: 2rem;
  }
  .card-top .circle {
    right: 3rem;
    bottom: 3rem;
  }
  .card-top:hover .circle::before {
    width: 100%;
    height: 100%;
  }
  .card-top:hover .circle__arrow::before {
    opacity: 0;
  }
  .card-top:hover .circle__arrow::after {
    opacity: 1;
  }
  .card-top:hover .card-top__img img {
    transform: scale(1.05);
  }
}
/*---------- START LIST CARD TOP ----------*/
@media only screen and (max-width: 767px) {
  .list-card-top .card-top {
    margin-top: 3rem;
  }
  .list-card-top .card-top:first-child {
    margin-top: 0;
  }
}
@media only screen and (min-width: 768px) {
  .list-card-top {
    display: grid;
    gap: 4rem;
    grid-template-columns: repeat(2, 1fr);
  }
}
/*---------- START GALLERY TOP ----------*/
.gallery-top img {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .gallery-top img {
    height: 35rem;
    object-fit: cover;
  }
}
/*---------- START TOP SCENE ----------*/
.top-scene__row {
  display: flex;
  align-items: center;
}
.top-scene__right {
  flex: 1;
}
.top-scene__body {
  position: relative;
}
.top-scene__body::before {
  position: absolute;
  content: "";
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.7;
  background: var(--color-pink-gradient-second);
}

@media only screen and (max-width: 575px) {
  .top-scene__body::before {
    top: -5%;
  }
}
@media only screen and (max-width: 767px) {
  .top-scene__left {
    width: 45%;
    margin-left: -1.5rem;
  }
  .top-scene__right {
    padding-left: 5.5%;
  }
  .top-scene__desc {
    margin-top: 1.2rem;
    font-size: 1.5rem;
  }
  .top-scene__body::before {
    top: -4%;
  }
}
@media only screen and (min-width: 768px) {
  .top-scene__left {
    width: 48.1rem;
    margin-left: -3.5rem;
  }
  .top-scene__right {
    padding-left: 5rem;
    padding-bottom: 7.5rem;
  }
  .top-scene__desc {
    margin-top: 2.2rem;
    padding-left: 0.8rem;
    font-size: 1.8rem;
  }
  .top-scene__body::before {
    top: -9.5rem;
  }
}
/*====================================================================================
6. START SECTION TOP USE.
====================================================================================*/
/*---------- START BOX TOP ----------*/
.box-top {
  position: relative;
  text-align: center;
  text-decoration: none;
  background-color: var(--color-white);
  box-shadow: 0 0 1.6rem rgba(0, 0, 0, 0.03);
}
.box-top__title {
  font-weight: 700;
}
.box-top .link {
  position: absolute;
}

@media only screen and (max-width: 767px) {
  .box-top {
    display: block;
    padding: 3rem 2rem 7rem 2rem;
    border-radius: 4rem;
  }
  .box-top__title {
    margin-bottom: 2.5rem;
    font-size: 2.2rem;
    letter-spacing: 0.03em;
  }
  .box-top .link {
    right: 2rem;
    bottom: 2rem;
  }
}
@media only screen and (min-width: 768px) {
  .box-top {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42rem;
    padding: 6.5rem 2rem 10rem 2rem;
    border-radius: 9.4rem;
  }
  .box-top__title {
    margin-bottom: 2rem;
    font-size: 3rem;
    letter-spacing: 0.1em;
  }
  .box-top .link {
    right: 5.5rem;
    bottom: 3.7rem;
  }
  .box-top:hover .box-top__img img {
    transform: scale(1.05);
  }
  .box-top:hover .link__text {
    background-position: 0 50%;
  }
  .box-top:hover .circle::before {
    width: 100%;
    height: 100%;
    transition-delay: 0.2s;
  }
  .box-top:hover .circle__arrow::before {
    opacity: 0;
    transition-delay: 0.2s;
  }
  .box-top:hover .circle__arrow::after {
    opacity: 1;
    transition-delay: 0.2s;
  }
}
/*---------- START LIST BOX TOP ----------*/
@media only screen and (max-width: 767px) {
  .list-box-top .box-top {
    margin-top: 3rem;
  }
  .list-box-top .box-top:first-child {
    margin-top: 0;
  }
}
@media only screen and (min-width: 768px) {
  .list-box-top {
    display: grid;
    gap: 6rem;
    grid-template-columns: repeat(2, 1fr);
  }
}
/*---------- START GROUP TOP ----------*/
.group-top {
  position: relative;
  background-color: var(--color-white);
  text-decoration: none;
  box-shadow: 0 0 1.6rem rgba(0, 0, 0, 0.03);
}
.group-top__title {
  margin-bottom: 0.7rem;
  font-weight: 700;
}

@media only screen and (max-width: 767px) {
  .group-top {
    padding: 3.5rem 2rem;
    border-radius: 4.5rem;
    text-align: center;
  }
  .group-top__center {
    margin-top: 1.5rem;
  }
  .group-top__right {
    margin-top: 2.5rem;
  }
  .group-top__title {
    font-size: 2.2rem;
    letter-spacing: 0.03em;
  }
  .group-top__desc {
    font-size: 1.6rem;
  }
}
@media only screen and (min-width: 768px) {
  .group-top {
    padding: 5rem 2rem 5rem 2rem;
    border-radius: 9.4rem;
  }
  .group-top__row {
    display: flex;
    align-items: center;
    max-width: 74rem;
    margin: 0 auto;
  }
  .group-top__left {
    width: 12.5rem;
  }
  .group-top__center {
    flex: 1;
    min-width: 1px;
    padding: 0 4rem 0 3.5rem;
  }
  .group-top__right {
    width: 19.6rem;
  }
  .group-top__title {
    font-size: 3rem;
    letter-spacing: 0.1em;
  }
  .group-top__desc {
    font-size: 1.8rem;
    line-height: 1.7;
  }
}
/*====================================================================================
7. START SECTION TOP TOPICS.
====================================================================================*/
/*---------- START LIST CARD MAIN ----------*/
.card-main {
  display: block;
  text-decoration: none;
}
.card-main__img {
  position: relative;
  display: block;
  margin-bottom: 2rem;
  border-radius: 1.5rem;
  overflow: hidden;
}
.card-main__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.card-main .tag-main {
  margin-bottom: 1rem;
}
.card-main__desc {
  line-height: 1.6;
  letter-spacing: 0.03em;
}

@media only screen and (max-width: 767px) {
  .card-main__img {
    padding-top: 75%;
  }
}
@media only screen and (min-width: 768px) {
  .card-main__img {
    padding-top: 20rem;
  }
  .card-main__desc {
    background: linear-gradient(90deg, var(--color-pink) 0%, var(--color-pink) 50%, var(--color-black) 50%, var(--color-black) 100%);
    background-size: 200% 100%;
    background-position: 100% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    transition: background-position 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
  .card-main:hover .card-main__img img {
    transform: scale(1.06);
  }
  .card-main:hover .card-main__desc {
    background-position: 0 50%;
  }
}
/*---------- START LIST CARD MAIN ----------*/
@media only screen and (max-width: 575px) {
  .list-card-main .card-main {
    margin-top: 3rem;
  }
  .list-card-main .card-main:first-child {
    margin-top: 0;
  }
}
@media only screen and (min-width: 576px) {
  .list-card-main {
    display: grid;
    gap: 3.5rem;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .list-card-main {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 768px) {
  .list-card-main {
    grid-template-columns: repeat(4, 1fr);
  }
}
/*---------- START BANNER TOP, LINE, INSTAGRAM ----------*/
.bnr-top,
.bnr-line,
.bnr-ins {
  position: relative;
  display: block;
  text-decoration: none;
}

/*---------- START BANNER TOP ----------*/
.bnr-top::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 1rem;
  background-color: var(--color-blue);
  transition: transform 0.3s ease;
}
.bnr-top__outer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 2rem;
  overflow: hidden;
}
.bnr-top__deco {
  z-index: 2;
}
.bnr-top__deco--v01 {
  top: -2rem;
  right: 0.5rem;
}
.bnr-top__deco--v02 {
  left: -3.5rem;
  bottom: 0.5rem;
}
.bnr-top__deco--v03 {
  right: -4rem;
  bottom: 0rem;
}
.bnr-top__title, .bnr-top__text {
  text-align: center;
  font-weight: 700;
  font-family: var(--font-zen-maru-gothic);
}
.bnr-top__text {
  color: var(--color-white);
  line-height: 1.5;
}
.bnr-top__title {
  color: var(--color-yellow);
  line-height: 1.3;
}
.bnr-top__btn {
  display: flex;
  justify-content: center;
}
.bnr-top__btn-wrap {
  position: relative;
  width: 22rem;
}

@media only screen and (max-width: 767px) {
  .bnr-top__title {
    margin-top: 0.2rem;
    font-size: 2.4rem;
  }
  .bnr-top__text--md {
    font-size: 1.6rem;
  }
  .bnr-top__text--sm {
    margin-top: 0.5rem;
  }
  .bnr-top__btn {
    margin-top: 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .bnr-top {
    width: 35rem;
  }
  .bnr-top__title {
    font-size: 3rem;
    letter-spacing: 0.1em;
  }
  .bnr-top__text--md {
    font-size: 2rem;
  }
  .bnr-top__text--sm {
    margin-top: 0.2rem;
  }
  .bnr-top__btn {
    margin-top: 1.2rem;
  }
  .bnr-top:hover::before {
    transform: scale(1.03);
  }
  .bnr-top:hover .btn::after {
    transform: scaleX(1);
    transform-origin: right center;
  }
  .bnr-top:hover .btn__text {
    color: var(--color-white);
  }
}
/*---------- START BANNER LINE ----------*/
.bnr-line::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 1rem;
  border: 0.3rem solid var(--color-green);
  background-color: var(--color-white);
  transition: transform 0.3s ease;
}
.bnr-line__row {
  position: relative;
  z-index: 2;
}
.bnr-line__figcaption {
  margin-top: 1.7rem;
  line-height: 1;
  letter-spacing: 0.03em;
}
.bnr-line__figcaption span,
.bnr-line__figcaption strong {
  display: block;
  font-weight: 900;
}
.bnr-line__figcaption span {
  font-size: 1.4rem;
}
.bnr-line__figcaption strong {
  color: var(--color-green);
  font-size: 2rem;
}
.bnr-line__title {
  color: var(--color-green);
  font-size: 3rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.03em;
}
.bnr-line__desc {
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: normal;
}

@media only screen and (max-width: 575px) {
  .bnr-line {
    padding: 3rem 2rem;
  }
  .bnr-line__left {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
  }
  .bnr-line__title {
    margin-bottom: 1.5rem;
    text-align: center;
  }
}
@media only screen and (min-width: 576px) {
  .bnr-line__row {
    display: flex;
    padding: 2rem 1.5rem 2rem 2.5rem;
  }
  .bnr-line__left {
    width: 11.5rem;
  }
  .bnr-line__right {
    flex: 1;
    min-width: 1px;
  }
  .bnr-line:hover::before {
    transform: scale(1.03);
  }
}
@media only screen and (max-width: 767px) {
  .bnr-line__title {
    font-size: 2.4rem;
  }
}
@media only screen and (min-width: 768px) {
  .bnr-line {
    width: 43.8rem;
  }
  .bnr-line__title {
    margin-right: -1rem;
    margin-bottom: 1rem;
  }
}
/*---------- START BANNER LINE ----------*/
.bnr-ins::before, .bnr-ins::after {
  position: absolute;
  content: "";
  transition: transform 0.3s ease;
}
.bnr-ins::after {
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 1rem;
  background: linear-gradient(155deg, rgb(147, 42, 245) 0%, rgb(230, 50, 99) 34%, rgb(247, 208, 70) 57%, rgb(232, 72, 80) 100%);
}
.bnr-ins::before {
  z-index: 2;
  top: 0.3rem;
  left: 0.3rem;
  right: 0.3rem;
  bottom: 0.3rem;
  border-radius: 0.8rem;
  background-color: var(--color-light-pink-second);
}
.bnr-ins__outer {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}
.bnr-ins__title {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

@media only screen and (max-width: 767px) {
  .bnr-ins__outer {
    height: 100vw;
    max-height: 19rem;
    padding: 3rem 2rem;
  }
  .bnr-ins__title {
    font-size: 2.4rem;
  }
}
@media only screen and (min-width: 768px) {
  .bnr-ins {
    width: 26.2rem;
  }
  .bnr-ins:hover::before, .bnr-ins:hover::after {
    transform: scale(1.03);
  }
}
/*---------- START TOP TOPICS ----------*/
@media only screen and (max-width: 767px) {
  .top-topics__right {
    margin-top: 1.5rem;
    text-align: right;
  }
  .top-topics__bnrs a {
    margin-top: 2.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .top-topics__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  .top-topics__right {
    padding-bottom: 0.7rem;
  }
  .top-topics__bnrs {
    display: flex;
    justify-content: space-between;
  }
}