/*!
global > color
------------------------------
*/
:root {
  --cl-gable-green: #174134;
  --cl-gray-nurse: #e3e8e3;
  --cl-iron: #dce2e1;
}

/*!
global > content-width
------------------------------
*/
/*!
global > font
------------------------------
*/
:root {
  --font-ja: "Noto Sans JP", sans-serif;
  --font-en: "Poppins", sans-serif;
}

/*!
global > mixin
------------------------------
*/
.p_top_news .p_top_news__more .more_content, .p_top_news .p_top_news_list .item__ttl, .p_top_movie__video_ttl, .p_top_movie__video_desc, .p_top_eco__txt {
  font-size: 0.875rem;
}
@media screen and (min-width: 768px) {
  .p_top_news .p_top_news__more .more_content, .p_top_news .p_top_news_list .item__ttl, .p_top_movie__video_ttl, .p_top_movie__video_desc, .p_top_eco__txt {
    font-size: clamp(0.875rem, 0.641025641vw + 0.5673076923rem, 1rem);
  }
}

.p_top_mv {
  position: relative;
}
.p_top_mv .p_top_mv__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.p_top_mv .p_top_mv__bg img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.p_top_mv .p_top_mv__bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--cl-gable-green);
  opacity: 0.8;
}
.p_top_mv .p_top_mv__bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translateX(-10.2564102564%);
  background-size: cover;
  background: url("../images/top/img_mv_overlay_sp.png");
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 624px;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p_top_mv .p_top_mv__bg::after {
    left: 55.5%;
    background: url("../images/top/img_mv_overlay.png");
    background-size: cover;
    min-width: unset;
    width: 939px;
    transform: translateX(-50%);
  }
}
.p_top_mv .p_top_mv__content {
  position: relative;
  padding-top: 114px;
  padding-inline: 13px;
  padding-bottom: 210px;
}
@media screen and (min-width: 768px) {
  .p_top_mv .p_top_mv__content {
    padding-top: 134px;
    padding-bottom: 220px;
    padding-inline: 0;
  }
}
.p_top_mv .p_top_mv__ttl {
  font-family: var(--font-en);
  font-weight: 700;
  color: #DCE2E1;
  font-size: 2.875rem;
  line-height: 0.9782608696;
  letter-spacing: -0.015em;
}
@media screen and (min-width: 768px) {
  .p_top_mv .p_top_mv__ttl {
    font-size: 5.5rem;
    line-height: 0.9659090909;
  }
}
.p_top_mv .p_top_mv__cap {
  font-weight: 700;
  font-size: 0.6875rem;
  font-feature-settings: "palt";
  letter-spacing: 0.12em;
  color: #fff;
  line-height: 1.7272727273;
  margin-top: 7px;
}
@media screen and (min-width: 768px) {
  .p_top_mv .p_top_mv__cap {
    font-size: clamp(1rem, 1.2820512821vw + 0.3846153846rem, 1.25rem);
    line-height: 1.65;
    margin-top: 10px;
    margin-left: 10px;
  }
}

/*=============================================
*                    News                     *
=============================================*/
.p_top_news {
  margin-top: 28px;
}
@media screen and (min-width: 768px) {
  .p_top_news {
    margin-top: 68px;
  }
}
.p_top_news .p_top_news__in {
  padding-inline: 28px;
}
@media screen and (min-width: 768px) {
  .p_top_news .p_top_news__in {
    display: flex;
    padding-inline: 40px;
  }
}
.p_top_news .p_top_news__content_area {
  position: relative;
}
@media screen and (min-width: 768px) {
  .p_top_news .p_top_news__content_area {
    min-width: 57.1%;
    max-width: 58%;
  }
}
.p_top_news .p_top_news__more {
  position: static;
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
@media screen and (min-width: 768px) {
  .p_top_news .p_top_news__more {
    display: block;
    position: absolute;
    right: 5px;
    top: 64px;
    margin-top: 0;
  }
}
.p_top_news .p_top_news__more .more_content {
  display: flex;
  align-items: center;
  border-bottom: 1px solid;
  padding-bottom: 5px;
  gap: 25px;
}
@media screen and (min-width: 768px) {
  .p_top_news .p_top_news__more .more_content {
    padding-right: 10px;
  }
}
.p_top_news .p_top_news__more .more_content::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
@media screen and (min-width: 768px) {
  .p_top_news .p_top_news__more .more_content::after {
    width: 11px;
    height: 11px;
  }
}
.p_top_news .p_top_news_list {
  margin-top: 12px;
  padding-left: 4px;
}
@media screen and (min-width: 768px) {
  .p_top_news .p_top_news_list {
    padding-left: 0;
    margin-top: 43px;
  }
}
.p_top_news .p_top_news_list .p_top_news_list__item {
  border-bottom: 1px solid #8ba099;
}
.p_top_news .p_top_news_list .item {
  display: block;
  position: relative;
  padding-bottom: 12px;
  padding-top: 15px;
  padding-right: 30px;
}
@media screen and (min-width: 768px) {
  .p_top_news .p_top_news_list .item {
    padding-bottom: 25px;
    padding-top: 23px;
  }
}
.p_top_news .p_top_news_list .item::after {
  content: "";
  right: 9px;
  top: 50%;
  width: 8px;
  height: 14px;
  transform: translateY(-50%);
  position: absolute;
  background: url("../images/common/icon_chev_right_green.svg");
  background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
  .p_top_news .p_top_news_list .item::after {
    right: 14px;
    top: 62px;
    transform: none;
  }
}
.p_top_news .p_top_news_list .item._no_link::after {
  display: none;
}
.p_top_news .p_top_news_list .item__date {
  font-size: 1.125rem;
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.p_top_news .p_top_news_list .item__ttl {
  font-feature-settings: "palt";
}
@media screen and (min-width: 768px) {
  .p_top_news .p_top_news_list .item__ttl {
    font-size: 1rem;
    letter-spacing: 0.02em;
  }
}
@media screen and (max-width: 767px) {
  .p_top_news .p_top_news_list .item__ttl {
    line-height: 1.4285714286;
  }
}
.p_top_news .p_top_news__img_area {
  margin-top: 29px;
}
@media screen and (min-width: 768px) {
  .p_top_news .p_top_news__img_area {
    margin-top: 32px;
    flex: 1;
    padding-left: clamp(1.875rem, 15.0462962963vw + -5.3472222222rem, 5.9375rem);
  }
}
.p_top_news .p_top_news__thumb {
  margin-inline: calc(50% - 50vw);
  display: block;
}
@media screen and (min-width: 768px) {
  .p_top_news .p_top_news__thumb {
    margin-right: calc(50% - 50vw);
    margin-left: unset;
    width: max(835px, 41.75vw);
  }
}

/*=====  End of News  ======*/
/*=====  Movie  ======*/
.p_top_movie {
  position: relative;
  margin-top: 51px;
}
@media screen and (min-width: 768px) {
  .p_top_movie {
    margin-top: 100px;
  }
}
.p_top_movie::before {
  content: "";
  width: 86.1333333333vw;
  height: 149.3333333333vw;
  position: absolute;
  top: 0;
  left: 0;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  background: var(--cl-gable-green);
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .p_top_movie::before {
    left: unset;
    right: clamp(2.5rem, 66.9527896996vw + -29.6373390558rem, 41.5rem);
    width: 1336px;
    height: 2310px;
  }
}

.p_top_movie__head {
  width: 86.1333333333vw;
  height: 40.8vw;
}
@media screen and (min-width: 768px) {
  .p_top_movie__head {
    position: absolute;
    right: clamp(2.3125rem, 66.5236051502vw + -29.6188304721rem, 41.0625rem);
    height: 500px;
    width: 1343px;
    transform: translateX(-0.35vw);
  }
}
.p_top_movie__head .p_top_movie__mimg {
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 73% 100%, 0% 100%);
}
@media screen and (min-width: 768px) {
  .p_top_movie__head .p_top_movie__mimg {
    clip-path: polygon(0 0, 100% 0, 78.5% 100%, 0% 100%);
  }
}
.p_top_movie__head .p_top_movie__mimg img {
  height: 100%;
  object-fit: cover;
}
@media screen and (min-width: 768px) {
  .p_top_movie__head .p_top_movie__mimg img {
    object-position: top 50% left clamp(0rem, -40.8653846154vw + 40.8653846154rem, 21.25rem);
  }
}

.p_top_movie__video_box {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  margin-top: 51px;
}
@media screen and (min-width: 768px) {
  .p_top_movie__video_box {
    max-width: 840px;
    margin-top: 4.1vw;
  }
}
.p_top_movie__video_box::before {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  background: url("../images/common/icon_play.svg");
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .p_top_movie__video_box::before {
    width: 100px;
  }
}
.p_top_movie__video_box.is_video_played::before {
  display: none;
}

.p_top_movie__video_ele {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 840/470;
  display: block;
  cursor: pointer;
}

.p_top_movie__ttl .c_cmn_ttl__en {
  color: #dce2e1;
}
.p_top_movie__ttl .c_cmn_ttl__ja {
  color: #ffffff;
}

.p_top_movie__body {
  position: relative;
  padding-inline: 9px;
  padding-top: 20px;
  padding-bottom: 164px;
}
@media screen and (min-width: 768px) {
  .p_top_movie__body {
    padding-top: 570px;
    padding-bottom: max(230px, 16.15vw);
    padding-inline: 0;
  }
}

.p_top_movie__right_img {
  position: absolute;
  z-index: -1;
  bottom: 0;
  right: 0;
  width: 42.8vw;
}
@media screen and (min-width: 768px) {
  .p_top_movie__right_img {
    bottom: initial;
    top: 12.5vw;
    right: unset;
    left: 53.5%;
    height: 100%;
    width: max(940px, 47vw);
  }
}
.p_top_movie__right_img img {
  height: 100%;
  object-fit: contain;
}

.p_top_movie__video_info {
  text-align: center;
  margin-top: 17px;
}
@media screen and (min-width: 768px) {
  .p_top_movie__video_info {
    margin-top: 1.3vw;
  }
}

.p_top_movie__video_ttl {
  font-weight: 600;
  font-feature-settings: "palt";
}

.p_top_movie__video_desc {
  font-feature-settings: "palt";
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  .p_top_movie__video_desc {
    margin-top: 4px;
  }
}

/*=====  End of Movie  ======*/
/*=====  Ecopos  ======*/
.p_top_eco {
  padding-inline: 8px;
  padding-bottom: 160px;
  margin-top: 8vw;
}
@media screen and (min-width: 768px) {
  .p_top_eco {
    margin-top: 13.35vw;
    padding-bottom: 270px;
  }
}
@media screen and (max-width: 767px) {
  .p_top_eco .l_container {
    max-width: clamp(22.5rem, 51.0204081633vw + 10.5420918367rem, 35rem);
    margin-left: auto;
    margin-right: auto;
  }
}

.p_top_eco__in {
  position: relative;
  margin-right: 11px;
  background-color: #e5e5e5;
  border-radius: 10px;
}
@media screen and (min-width: 768px) {
  .p_top_eco__in {
    margin-right: 7.5%;
  }
}

@media screen and (min-width: 768px) {
  .p_top_eco__target:hover {
    opacity: 1;
  }
  .p_top_eco__target:hover .p_top_eco__bg {
    opacity: 0.8;
  }
  .p_top_eco__target:hover .p_top_eco__link {
    background-color: #e5e5e5;
  }
}

.p_top_eco__bg {
  display: block;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  border-radius: 6px 6px 0 0;
  transition: opacity 0.5s ease-in-out;
}
@media screen and (min-width: 768px) {
  .p_top_eco__bg {
    border-radius: 10px;
  }
}
.p_top_eco__bg img {
  object-fit: cover;
  aspect-ratio: 308/110;
  object-position: top left;
}
@media screen and (min-width: 768px) {
  .p_top_eco__bg img {
    height: 100%;
    object-position: center;
    aspect-ratio: unset;
  }
}

.p_top_eco__content {
  position: relative;
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  .p_top_eco__content {
    max-width: 340px;
    margin-right: 12.5405405405%;
    padding-top: 7.5675675676%;
    padding-bottom: 10.1621621622%;
  }
}

.p_top_eco__ttl {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-feature-settings: "palt";
  font-size: 1.5rem;
  text-align: right;
  padding-top: 9.0666666667vw;
  padding-right: 64px;
  padding-bottom: 8.8vw;
}
@media screen and (min-width: 768px) {
  .p_top_eco__ttl {
    text-align: initial;
    font-size: 2.5rem;
    padding: 0;
  }
}

.p_top_eco__txt {
  color: #E3E8E3;
  font-feature-settings: "palt";
  font-weight: 400;
  line-height: 1.8571428571;
  border-radius: 0 0 6px 6px;
  background-color: var(--cl-gable-green);
  padding: 4.2666666667vw 7.7333333333vw 5.3333333333vw;
}
@media screen and (min-width: 768px) {
  .p_top_eco__txt {
    border-radius: 0;
    background-color: transparent;
    padding: 0;
    max-width: unset;
    margin-top: 10px;
    line-height: 2.375;
  }
}

.p_top_eco__link {
  position: absolute;
  right: -2px;
  top: 8vw;
  background-color: #fff;
  border-radius: 50%;
  aspect-ratio: 1;
  border: 1px solid var(--cl-gable-green);
  width: 50px;
  transform: translateX(50%);
  transition: background-color 0.5s ease-in-out;
}
@media screen and (min-width: 768px) {
  .p_top_eco__link {
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(50%);
    width: 16.2162162162%;
  }
}

.p_top_eco__btn {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.p_top_eco__btn img {
  width: 8px;
  height: 6px;
}
@media screen and (min-width: 768px) {
  .p_top_eco__btn img {
    width: 20px;
    height: 14px;
  }
}

/*=====  End of Ecopos  ======*/