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

1. START COMMON ONLY TOP PAGE.
2. START SECTION MAIN VISUAL.
3. START SECTION TOP PICK.
4. START SECTION TOP NEWS.
5. START SECTION TOP EVENT.
6. START SECTION TOP MESSAGE.
7. START SECTION TOP ABOUT.

/*====================================================================================
1. START COMMON ONLY TOP PAGE.
====================================================================================*/
/*---------- START JS SLICK ----------*/
.js-slick__core {
  display: flex;
  align-items: center;
  justify-content: center;
}
.js-slick__control {
  position: relative;
  width: 1.5rem;
  height: 1.8rem;
  margin-right: 1.5rem;
  cursor: pointer;
}
.js-slick__control::before, .js-slick__control::after {
  position: absolute;
  content: "";
  top: 0;
  left: 50%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 0.2s ease;
}
.js-slick__control::before {
  opacity: 1;
  width: 1.1rem;
  height: 1.8rem;
  margin-left: -0.55rem;
  background-image: url("./../common_img/icon-pause-gray.webp");
}
.js-slick__control::after {
  opacity: 0;
  width: 1.5rem;
  height: 1.8rem;
  margin-left: -0.75rem;
}
.js-slick__control.js-stop::before {
  opacity: 0;
}
.js-slick__control.js-stop::after {
  opacity: 1;
}
.js-slick__dots .slick-dots {
  display: flex;
}
.js-slick__dots li {
  display: block;
}
.js-slick__dots li button {
  display: block;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  border-width: 1px;
  border-style: solid;
  border-color: var(--color-neutral-500);
  background-color: var(--color-neutral-350);
  text-indent: -9999px;
  outline: none;
}

@media only screen and (max-width: 767px) {
  .js-slick__dots .slick-dots {
    gap: 1rem;
  }
  .js-slick__dots li button {
    width: 1.2rem;
    height: 1.2rem;
  }
}
@media only screen and (min-width: 768px) {
  .js-slick__dots .slick-dots {
    gap: 1.3rem;
  }
  .js-slick__dots li button {
    width: 1.5rem;
    height: 1.5rem;
  }
}
/*---------- START COMPONENT SLIDER MAIN VISUAL ----------*/
.c-slider-mv .js-slick__core {
  margin-top: var(--spacing-sp20-pc30);
}

/*---------- START COMPONENT SLIDER TOP ----------*/
.c-slider-top__list {
  position: relative;
}
.c-slider-top__list .slick-arrow {
  position: absolute;
  display: inline-block;
  top: 50%;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid var(--theme-color-tridenary);
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
  background-color: var(--theme-color-tridenary);
  text-indent: -9999px;
  overflow: hidden;
  line-height: 0;
  transition: background-color 0.3s ease;
}
.c-slider-top__list .slick-arrow::before {
  position: absolute;
  content: "";
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 1.2rem;
  height: 1.8rem;
  margin-top: -0.9rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.c-slider-top__list .slick-arrow.is-disabled {
  opacity: 0.2;
  pointer-events: none;
}
.c-slider-top__list .slick-prev::before {
  margin-left: -0.7rem;
  background-image: url("./../common_img/arrow02-left-white.webp");
}
.c-slider-top__list .slick-next::before {
  margin-left: -0.4rem;
  background-image: url("./../common_img/arrow02-right-white.webp");
}
.c-slider-top .js-slick__core {
  margin-top: var(--spacing-sp25-pc35);
}

@media only screen and (max-width: 575px) {
  .c-slider-top__list {
    padding: 0 5.5rem;
  }
  .c-slider-top__list .slick-list {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
  .c-slider-top__list .slick-prev {
    left: -0.75rem;
  }
  .c-slider-top__list .slick-next {
    right: -0.75rem;
  }
  .c-slider-top__list .c-card-top {
    margin: 0 0.5rem;
  }
}
@media only screen and (min-width: 576px) {
  .c-slider-top__list .slick-prev {
    left: 0;
  }
  .c-slider-top__list .slick-next {
    right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .c-slider-top__list .slick-arrow {
    margin-top: -2.5rem;
    width: 5rem;
    height: 5rem;
    background-color: var(--theme-color-tridenary);
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .c-slider-top__list {
    padding: 0 7rem;
  }
  .c-slider-top__list .slick-list {
    margin-left: -1rem;
    margin-right: -1rem;
  }
  .c-slider-top__list .c-card-top {
    margin: 0 1rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-slider-top__list {
    padding: 0 11rem;
  }
  .c-slider-top__list .slick-list {
    margin-left: -2.5rem;
    margin-right: -2.5rem;
  }
  .c-slider-top__list .slick-arrow {
    margin-top: -3.5rem;
    width: 7rem;
    height: 7rem;
  }
  .c-slider-top__list .slick-arrow:hover {
    background-color: var(--theme-color-secondary);
  }
  .c-slider-top__list .slick-prev:hover::before {
    background-image: url("./../common_img/arrow02-left-black.webp");
  }
  .c-slider-top__list .slick-next:hover::before {
    background-image: url("./../common_img/arrow02-right-black.webp");
  }
  .c-slider-top__list .c-card-top {
    margin: 0 2.5rem;
  }
}
/*---------- START PROJECT GROUP TOP ----------*/
.p-group-top {
  background-color: var(--theme-color-secondary);
}
.p-group-top__title {
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: normal;
}
.p-group-top__link {
  text-decoration: none;
}

@media only screen and (max-width: 767px) {
  .p-group-top {
    padding: 2rem;
  }
  .p-group-top__left {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
  }
}
@media only screen and (min-width: 768px) {
  .p-group-top {
    padding: 1.5rem 3rem;
  }
  .p-group-top__row {
    display: flex;
  }
  .p-group-top__left {
    flex: 0 0 auto;
  }
  .p-group-top__right {
    flex: 1;
    padding-left: 3rem;
  }
  .p-group-top__heading {
    position: relative;
    display: inline-block;
    padding-right: 2.5rem;
  }
  .p-group-top__heading::before {
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    width: 2px;
    height: calc(100% - 1.2rem);
    transform: translateY(-50%);
  }
  .p-group-top__link:hover p {
    text-decoration: underline;
  }
}
/*---------- START COMPONENT CARD TOP ----------*/
.c-card-top__link {
  position: relative;
  display: block;
  padding-top: 4rem;
  text-decoration: none;
}
.c-card-top__tag {
  position: absolute;
  top: 0;
}
.c-card-top__img {
  position: relative;
  display: block;
  margin-bottom: 2rem;
  overflow: hidden;
}
.c-card-top__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-card-top__title {
  font-weight: 700;
  transition: color 0.3s ease;
}
.c-card-top__tbl {
  margin-top: 1.2rem;
}
.c-card-top__dl {
  display: flex;
  line-height: 1.6;
}
.c-card-top__dt {
  flex: 0 0 auto;
}
.c-card-top__dd {
  flex: 1;
  padding-left: 0.2rem;
}

@media only screen and (max-width: 767px) {
  .c-card-top__img {
    padding-top: 145%;
  }
  .c-card-top__title {
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-card-top__img {
    padding-top: 37rem;
  }
  .c-card-top__title {
    font-size: 1.6rem;
  }
  .c-card-top:hover .c-card-top__img img {
    transform: scale(1.03);
  }
}
/*---------- START COMPONENT ITEM TOP ----------*/
.c-item-top__link {
  text-decoration: none;
}
.c-item-top__heading {
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 767px) {
  .c-item-top__left {
    margin-bottom: 1rem;
  }
  .c-item-top__time {
    margin-right: 2rem;
  }
  .c-item-top .c-tag__wrap {
    min-width: 12rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-item-top__link {
    display: flex;
  }
  .c-item-top__link:hover .c-item-top__right p {
    text-decoration: underline;
  }
  .c-item-top__left {
    flex: 0 0 auto;
  }
  .c-item-top__right {
    flex: 1;
    padding-left: 3rem;
    transition: color 0.3s ease;
  }
  .c-item-top__time {
    margin-right: 2.5rem;
  }
  .c-item-top .c-tag__wrap {
    min-width: 12.5rem;
  }
}
/*---------- START PROJECT LIST ITEM TOP ----------*/
.p-list-item-top .c-item-top {
  border-bottom: 1px solid var(--theme-border-secondary);
}
.p-list-item-top .c-item-top:first-child {
  padding-top: 0;
}

@media only screen and (max-width: 767px) {
  .p-list-item-top .c-item-top {
    padding: 2rem 0;
  }
}
@media only screen and (min-width: 768px) {
  .p-list-item-top .c-item-top {
    padding: 2.6rem 0;
  }
}
/*---------- START COMPONENT BOX TOP ----------*/
.c-box-top {
  display: block;
  text-decoration: none;
  background-color: var(--theme-color-nonary);
}
.c-box-top__row {
  display: flex;
}
.c-box-top__right {
  padding-left: 1rem;
}
.c-box-top__img {
  text-align: center;
}
.c-box-top__title {
  margin-bottom: 0.7rem;
  font-weight: 500;
}
.c-box-top__link {
  margin-top: 0.5rem;
  text-align: right;
}
.c-box-top__link .c-link-arrow {
  font-weight: 500;
}

@media only screen and (max-width: 767px) {
  .c-box-top {
    padding: 2.5rem 2rem 2rem 1rem;
  }
  .c-box-top__img {
    width: 10rem;
  }
  .c-box-top__img img {
    transform: scale(0.8);
  }
  .c-box-top__title {
    font-size: 1.9rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-box-top {
    padding: 4.5rem 4.5rem 4rem 3rem;
    transition: all 0.3s ease;
  }
  .c-box-top__right {
    margin-top: -1rem;
  }
  .c-box-top__img {
    width: 12.1rem;
  }
  .c-box-top__title {
    font-size: 2.2rem;
  }
  .c-box-top:hover {
    border-radius: 1.5rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
  }
  .c-box-top:hover .c-box-top__img img {
    transform: scale(1.06);
  }
  .c-box-top:hover .c-box-top__link .link {
    text-decoration: underline;
  }
}
/*---------- START PROJECT LIST BOX TOP ----------*/
@media only screen and (max-width: 767px) {
  .p-list-box-top .c-box-top {
    margin-top: 2rem;
  }
  .p-list-box-top .c-box-top:first-child {
    margin-top: 0;
  }
}
@media only screen and (min-width: 768px) {
  .p-list-box-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -1.5rem;
  }
  .p-list-box-top .c-box-top {
    width: calc(50% - 3rem);
    margin: 1.5rem;
  }
}
/*---------- START COMPONENT POST TOP ----------*/
.c-post-top__link {
  text-decoration: none;
}
.c-post-top__left {
  text-align: center;
}
.c-post-top__header {
  display: flex;
  align-items: center;
  margin-bottom: 0.4rem;
}
.c-post-top__header .c-tag {
  margin-right: 2rem;
}
.c-post-top__time {
  font-weight: 500;
}
.c-post-top__title {
  font-weight: 500;
}
.c-post-top__dl {
  display: flex;
}
.c-post-top__dt {
  flex: 0 0 auto;
  font-weight: 700;
}
.c-post-top__dd {
  flex: 1;
  padding-left: 0.4rem;
}

@media only screen and (max-width: 575px) {
  .c-post-top__left {
    margin-bottom: 2rem;
  }
  .c-post-top__left img {
    width: calc(100% - 11rem);
  }
}
@media only screen and (min-width: 576px) {
  .c-post-top__row {
    display: flex;
  }
  .c-post-top__left {
    width: 26rem;
  }
  .c-post-top__right {
    flex: 1;
    padding-left: 2.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .c-post-top__title {
    font-size: 1.8rem;
  }
  .c-post-top__desc {
    margin-top: 1.5rem;
  }
  .c-post-top__tbl {
    margin-top: 2.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-post-top__link:hover .c-post-top__left img {
    transform: scale(1.03);
  }
  .c-post-top__left {
    overflow: hidden;
  }
  .c-post-top__title {
    font-size: 2rem;
  }
  .c-post-top__desc {
    margin-top: 2.2rem;
  }
  .c-post-top__tbl {
    margin-top: 4.2rem;
  }
}
/*---------- START PROJECT LIST POST TOP ----------*/
.p-list-post-top .c-post-top {
  border-bottom: 1px solid var(--theme-border-secondary);
}
.p-list-post-top .c-post-top:first-child {
  padding-top: 0;
}

@media only screen and (max-width: 767px) {
  .p-list-post-top .c-post-top {
    padding: 3rem 0 2.5rem 0;
  }
}
@media only screen and (min-width: 768px) {
  .p-list-post-top .c-post-top {
    padding: 4rem 0;
  }
}
/*---------- START COMPONENT TIMELINE X ----------*/
.c-timeline-x__wrap {
  overflow-y: auto;
}

@media only screen and (max-width: 767px) {
  .c-timeline-x__wrap {
    height: 100vw;
  }
}
@media only screen and (min-width: 768px) {
  .c-timeline-x__wrap {
    max-height: 81.5rem;
  }
}
/*---------- START COMPONENT BOX SIGN ----------*/
.c-box-sign {
  text-align: right;
}
.c-box-sign__text {
  margin-bottom: 0.2rem;
}
.c-box-sign__name {
  font-weight: 400;
}

@media only screen and (max-width: 767px) {
  .c-box-sign__text {
    font-size: 1.5rem;
  }
  .c-box-sign__name {
    font-size: 2rem;
  }
}
@media only screen and (min-width: 768px) {
  .c-box-sign__text {
    font-size: 1.8rem;
  }
  .c-box-sign__name {
    font-size: 2.4rem;
  }
}

/*---------- START LOADING INDICATOR ----------*/
.loading-indicator {
  text-align: center;
  padding: 20px;
  font-size: 16px;
  color: #888;
  position: relative;
}

.loading-indicator::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 10px;
  border: 2px solid #ddd;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*====================================================================================
2. START SECTION MAIN VISUAL.
====================================================================================*/
/*---------- START PROJECT MAIN VISUAL ----------*/
.p-mv {
  padding-top: var(--spacing-sp25-pc50);
}
.p-mv .p-group-top {
  margin-top: var(--spacing-sp30-pc60);
}

/*====================================================================================
3. START SECTION TOP PICK.
====================================================================================*/
/*---------- START PROJECT TOP PICK ----------*/
.p-top-pick {
  padding-top: var(--spacing-sp45-pc90);
}
.p-top-pick .c-title {
  margin-bottom: var(--spacing-sp20-pc35);
}

/*====================================================================================
4. START SECTION TOP NEWS.
====================================================================================*/
/*---------- START PROJECT TOP NEWS ----------*/
.p-top-news {
  padding-top: var(--spacing-sp45-pc90);
}
.p-top-news .c-title {
  margin-bottom: var(--spacing-sp20-pc35);
}
.p-top-news__btn {
  margin-top: var(--spacing-sp30-pc60);
  text-align: center;
}

/*====================================================================================
5. START SECTION TOP EVENT.
====================================================================================*/
/*---------- START PROJECT TOP EVENT ----------*/
.p-top-event {
  padding: var(--spacing-sp30-pc60) 0 var(--spacing-sp50-pc100) 0;
  background-color: var(--theme-color-secondary);
}
.p-top-event .c-title {
  margin-bottom: var(--spacing-sp25-pc40);
}
.p-top-event__row {
  display: flex;
}
.p-top-event__btn {
  margin-top: var(--spacing-sp30-pc60);
  text-align: center;
}
.p-top-event__btn02 {
  margin-top: 2rem;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .p-top-event__row {
    flex-direction: column-reverse;
  }
  .p-top-event__right {
    margin-bottom: 3.5rem;
  }
  .p-top-event__x {
    margin-bottom: 3.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .p-top-event__left {
    flex: 1;
    padding-right: 3.5rem;
  }
  .p-top-event__right {
    width: 32rem;
  }
  .p-top-event__x {
    margin-top: 3rem;
  }
}
/*====================================================================================
6. START SECTION TOP MESSAGE.
====================================================================================*/
/*---------- START PROJECT TOP MESSAGE ----------*/
.p-top-message {
  padding-top: var(--spacing-sp45-pc90);
}
.p-top-message .c-title {
  margin-bottom: var(--spacing-sp25-pc40);
}
.p-top-message__subtitle {
  font-weight: 500;
}

@media only screen and (max-width: 767px) {
  .p-top-message__left {
    margin-bottom: 2rem;
  }
  .p-top-message__left img {
    width: 100%;
  }
  .p-top-message__subtitle {
    margin-bottom: 1.5rem;
    font-size: 2rem;
  }
  .p-top-message .c-box-sign {
    margin-top: 2rem;
  }
}
@media only screen and (min-width: 768px) {
  .p-top-message__left {
    float: right;
    width: calc(50% + 1.5rem);
    margin-bottom: 1rem;
    padding-left: 3.5rem;
  }
  .p-top-message__subtitle {
    margin-bottom: 2rem;
    font-size: 2.4rem;
    line-height: 2;
  }
  .p-top-message .c-box-sign {
    margin-top: 2.5rem;
  }
}
/*====================================================================================
7. START SECTION TOP ABOUT.
====================================================================================*/
/*---------- START PROJECT TOP ABOUT ----------*/
.p-top-about {
  padding: var(--spacing-sp30-pc60) 0 var(--spacing-sp50-pc100) 0;
  background-color: var(--theme-color-secondary);
}
.p-top-about .c-title {
  margin-bottom: var(--spacing-sp20-pc35);
}
.p-top-about .p-list-box-top {
  margin-top: var(--spacing-sp25-pc35);
}