@charset "UTF-8";
@media screen and (min-width: 770px) {
  /* conts_movie */
  #heartful-sustainable #conts_movie {
    .auto {
      max-width: 1266px;
    }
    h2 {
      margin-bottom: min(calc(65vw * .076), 65px);
    }
    .movie_title {
      font-size: var(--font-26);
    }
    .movie_slider {
      padding-bottom: 3.8vw;
      margin-bottom: min(calc(80vw* .2), 80px);
    }
    .movie_slider .swiper-slide {
      box-sizing: border-box;
    }
    .swiper-slide-shadow, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top {
      background: none !important;
    }
    .slide_inner {
      width: 100%;
      padding-inline: 7vw;
    }
    .movie_in {
      width: 100%;
      aspect-ratio: 16/9;
    }
    iframe {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .movie_slider .swiper-button-prev, .movie_slider .swiper-button-next {
      width: 1.4vw;
      height: 3vw;
      background: transparent url(../images/index/icon_arrow_02_l.png)no-repeat center/contain;
      left: 13%;
    }
    .movie_slider .swiper-button-next {
      background-image: url(../images/index/icon_arrow_02_r.png);
      left: auto;
      right: 13%
    }
    .movie_slider .swiper-button-prev svg, .movie_slider .swiper-button-next svg {
      display: none;
    }
    .movie_slider .swiper-pagination {
      line-height: 0;
    }
    .movie_slider .swiper-pagination-bullet {
      width: 13px;
      height: 13px;
      margin-inline: 15px;
    }
    .movie_slider .swiper-pagination-bullet-active {
      background-color: #009e6e;
    }
    /* swiper_short */
    .swiper_short {
      position: relative;
    }
    .swiper_short .swiper-wrapper {
      gap: 2.4%;
    }
    .swiper_short .swiper-pagination {
      display: none;
    }

    .swiper_short .swiper-slide {
      width: 23.2%;
    }
    .swiper_short .title_short {
      font-size: var(--font-26);
      margin-bottom: min(calc(14vw* .2), 14px);
    }
    .swiper_short .title_short .small {
      font-size: var(--font-15);
    }
    .swiper_short .movie {
      width: 100%;
      aspect-ratio: 9/16;
    }
    .swiper_short iframe {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .swiper_short .swiper-button-prev, .swiper_short .swiper-button-next {
      display: none;
    }
  }
  /* conts_about */
  #heartful-sustainable .conts_about {
    .action_img {
      display: grid;
      width: 88%;
      padding: min(calc(160vw* .2), 160px) 0 min(calc(136vw* .2), 136px);
      /* min-width: 915px; */
      margin: 0 auto min(calc(35vw*.076), 35px);
      grid-template-areas:
        "one two three"
        "six five four";
      background: url(../images/top/center_circle.png) no-repeat center/50%;
    }
    .text {
      font-size: var(--font-23);
    }
    .action_img li {
      width: 112%;
      position: relative;
      left: -6%;
    }
    .action_img li:nth-child(1) {
      grid-area: one;
      z-index: 5;
    }
    .action_img li:nth-child(2) {
      grid-area: two;
      top: -40%;
      z-index: 4;
    }
    .action_img li:nth-child(3) {
      grid-area: three;
      z-index: 3;
    }
    .action_img li:nth-child(4) {
      grid-area: four;
      z-index: 2;
      top: -3%;
    }
    .action_img li:nth-child(5) {
      grid-area: five;
      bottom: -34%;
      z-index: 1;
    }
    .action_img li:nth-child(6) {
      grid-area: six;
      top: -3%;
    }
    .action_img li::after {
      content: "";
      display: block;
      width: min(calc(57vw* .076), 57px);
      height: min(calc(57vw* .076), 57px);
      background: url(../images/top/btn_action_01.png)no-repeat center/contain;
      position: absolute;
      bottom: 7%;
      right: 14%;
      transition-duration: .3s;
    }
    .action_img li:nth-child(2)::after {
      background-image: url(../images/top/btn_action_02.png);
    }
    .action_img li:nth-child(3)::after {
      background-image: url(../images/top/btn_action_03.png);
    }
    .action_img li:nth-child(4)::after {
      background-image: url(../images/top/btn_action_04.png);
    }
    .action_img li:nth-child(5)::after {
      background-image: url(../images/top/btn_action_05.png);
    }
    .action_img li:nth-child(6)::after {
      background-image: url(../images/top/btn_action_06.png);
    }
    .action_img li:hover::after {
      right: 12%;
    }
  }
  /* conts_action_map */
  #heartful-sustainable .conts_action_map {
    padding: 0;





    .p-scrollFit__section.u-bg__white {
      padding: min(calc(80vw * .076), 80px) 0 min(calc(80vw * .076), 80px);
      background-color: #f6faf0;
      margin-bottom: 0;
    }
    .p-kv__content_view {
      background: transparent;
    }
    .auto {
      padding: min(calc(110vw * .076), 110px) 0 min(calc(80vw * .076), 80px);
      border-bottom: 0;
    }
  }

  /*=========================
▼▼ conts-mall-list ▼▼
===========================*/
  #conts-mall-list {
    margin-bottom: 0;
  }
  #conts-mall-list .title_wrap h2 {
    margin-bottom: max(calc(-44vw*.076), -44px);
  }
  .retuen-top {
    width: 41%;
    margin: 0 auto min(calc(43vw*.076), 43px);
  }
  .retuen-top a {
    padding: min(calc(8vw * .076), 8px) 2% min(calc(12vw * .076), 12px);
    display: block;
    border: 3px solid #009e6e;
    border-radius: 15px;
    box-shadow: #009e6e 6px 6px 0 0;
    transition: .3s;
  }
  .retuen-top a:hover {
    box-shadow: none;
    transform: translate(7px, 7px);
  }
  .retuen-top a img {
    border-radius: 15px;
  }
  .other-title {
    font-weight: 600;
    font-size: min(calc(30vw*.076), 30px);
    text-align: center;
    margin-bottom: min(calc(42vw*.076), 42px);
    position: relative;
  }
  .other-page-list {
    display: flex;
    flex-wrap: wrap;
    gap: 3%;
    justify-content: center;
    padding-bottom: min(calc(112vw* .2), 112px);
    border-bottom: 1px solid #e2e2e2;
  }
  .other-page {
    width: 31%;
    margin-bottom: min(calc(25vw*.076), 25px);
  }
  .other-page a {
    display: block;
    border: 3px solid #009e6e;
    border-radius: 15px;
    box-shadow: #009e6e 7px 7px 0 0;
    transition: .3s;
  }
  .other-page a img {
    border-radius: 15px;
  }
  .other-page a {
    display: block;
    border-radius: 15px;
    transition: .3s;
    padding: min(calc(15vw * .076), 17px) 2%;
  }
  .other-page.mall-power-plant a {
    border: 3px solid #0159a7;
    box-shadow: #0159a7 6px 6px 0 0;
  }
  .other-page.nature-mall a {
    border: 3px solid #007457;
    box-shadow: #007457 6px 6px 0 0;
  }
  .other-page.circular-mall a {
    border: 3px solid #b58333;
    box-shadow: #b58333 6px 6px 0 0;
  }
  .other-page.regional-community-mall a {
    border: 3px solid #eaa823;
    box-shadow: #eaa823 6px 6px 0 0;
  }
  .other-page.resilient-mall a {
    border: 3px solid #ea5404;
    box-shadow: #ea5404 6px 6px 0 0;
  }
  .other-page.hearth-wellness-mall a {
    border: 3px solid #01ac9f;
    box-shadow: #01ac9f 6px 6px 0 0;
  }
  .other-page a:hover {
    box-shadow: none;
    transform: translate(7px, 7px);
  }
  .modal-detail .name {
    flex: 1;
    margin-right: 6px;
    text-align: left;
  }
  .modal-items__item-list li {
    margin-bottom: min(calc(5vw*.076), 5px);
  }
  /*=========================
▲▲ conts-mall-list ▲▲
===========================*/
}
@media screen and (max-width: 769px) {
  /* conts_movie */
  #heartful-sustainable #conts_movie {
    h2 {
      margin-bottom: 24px;
    }
    /* movie_slider */
    .movie_slider {
      padding-bottom: 30px;
      margin-bottom: 60px;
    }
    .swiper-slide {
      box-sizing: border-box;
    }
    .swiper-slide-shadow, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top {
      background: none !important;
    }
    .slide_inner {
      width: 100%;
      padding-inline: 0;
    }
    .movie_in {
      width: 100%;
      aspect-ratio: 16/9;
    }
    .movie_slider iframe {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .movie_slider .swiper-button-prev, .movie_slider .swiper-button-next {
      width: 7%;
      height: 17%;
      background: transparent url(../images/index/icon_arrow_02_l.png)no-repeat center/contain;
      left: 2%;
    }
    .movie_slider .swiper-button-next {
      background-image: url(../images/index/icon_arrow_02_r.png);
      left: auto;
      right: 2%;
    }
    .movie_slider .swiper-button-prev svg, .movie_slider .swiper-button-next svg {
      display: none;
    }
    .movie_slider .swiper-pagination {
      line-height: 0;
      bottom: 0;
    }
    .movie_slider .swiper-pagination-bullet {
      width: 10px;
      height: 10px;
      margin-inline: 8px;
    }
    .movie_slider .swiper-pagination-bullet-active {
      background-color: #009e6e;
    }
    /* swiper_short */
    .swiper_short {
      padding-bottom: 30px;
      position: relative;
    }
    .swiper_short .swiper-wrapper {
      gap: 2.4%;
    }
    .swiper_short .swiper-slide {
      width: 23.2%;
    }
    .swiper_short .title_short {
      font-size: 18px;
      margin-bottom: 10px;
    }
    .swiper_short .title_short .small {
      font-size: 14px;
    }
    .swiper_short .movie {
      width: 100%;
      aspect-ratio: 9/16;
    }
    .swiper_short iframe {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .swiper_short .swiper-button-prev, .swiper_short .swiper-button-next {
      width: 12%;
      height: 12%;
      background: transparent url(../images/top/btn_arrow_03_r.png)no-repeat center/contain;
      right: 4%;
      left: auto;
    }
    .swiper_short .swiper-button-prev {
      background-image: url(../images/top/btn_arrow_03_l.png);
      left: 4%;
      right: auto;
    }
    .swiper_short .swiper-button-prev svg, .swiper_short .swiper-button-next svg {
      display: none;
    }
    .swiper_short .swiper-pagination {
      line-height: 0;
      bottom: 0;
    }
    .swiper_short .swiper-pagination-bullet {
      width: 10px;
      height: 10px;
      margin-inline: 8px;
    }
    .swiper_short .swiper-pagination-bullet-active {
      background-color: #009e6e;
    }
  }
  /* conts_about */
  #heartful-sustainable .conts_about {
    .action_img {
      display: grid;
      width: 100%;
      padding: 24vw 0 21vw;
      margin: 0 auto;
      grid-template-areas:
        "one two three"
        "six five four";
      background: url(../images/top/center_circle.png) no-repeat center/50%;
      margin-bottom: 40px;
    }
    .text {
      font-size: 17px;
      line-height: 1.6;
    }
    .action_img li {
      width: 130%;
      position: relative;
      left: -15%;
    }
    .action_img li:nth-child(1) {
      grid-area: one;
      z-index: 5;
    }
    .action_img li:nth-child(2) {
      grid-area: two;
      top: -23vw;
      z-index: 4;
    }
    .action_img li:nth-child(3) {
      grid-area: three;
      z-index: 3;
    }
    .action_img li:nth-child(4) {
      grid-area: four;
      z-index: 2;
      top: -3%;
    }
    .action_img li:nth-child(5) {
      grid-area: five;
      bottom: -21vw;
      z-index: 1;
    }
    .action_img li:nth-child(6) {
      grid-area: six;
      top: -3%;
    }
    .action_img li::after {
      content: "";
      display: block;
      width: 6vw;
      height: 6vw;
      background: url(../images/top/btn_action_01.png)no-repeat center/contain;
      position: absolute;
      bottom: 7%;
      right: 14%;
    }
    .action_img li:nth-child(2)::after {
      background-image: url(../images/top/btn_action_02.png);
    }
    .action_img li:nth-child(3)::after {
      background-image: url(../images/top/btn_action_03.png);
    }
    .action_img li:nth-child(4)::after {
      background-image: url(../images/top/btn_action_04.png);
    }
    .action_img li:nth-child(5)::after {
      background-image: url(../images/top/btn_action_05.png);
    }
    .action_img li:nth-child(6)::after {
      background-image: url(../images/top/btn_action_06.png);
    }
  }
  /* conts_action_map */
  #heartful-sustainable .conts_action_map {
    padding: 0;

    &::after {
      display: none;
    }
    .p-scrollFit__section.u-bg__white {
      padding: 50px 5% 20px;
      background-color: #f6faf0;
      margin-bottom: 0;
    }
    .p-kv__content_view {
      background: transparent;
    }
    .auto {
      padding: 50px 0 60px;
    }
  }

  /*=========================
▼▼ conts-mall-list ▼▼
===========================*/
  #conts-mall-list {
    margin-bottom: 0;
  }
  #conts-mall-list .auto {
    padding-bottom: 40px;
    margin: 0 auto;
    border-bottom: 1px solid #e2e2e2;
  }
  #conts-mall-list h2 {
    margin-bottom: -22px;
  }
  .retuen-top {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 28px;
  }
  .retuen-top a {
    padding: 8px 2% 12px;
    display: block;
    border: 3px solid #009e6e;
    border-radius: 15px;
    box-shadow: #009e6e 4px 4px 0 0;
    transition: .3s;
    background-color: #fff;
    position: relative;
  }
  .retuen-top a:hover {
    box-shadow: none;
    transform: translate(7px, 7px);
  }
  .retuen-top a img {
    border-radius: 15px;
  }
  .other-title {
    font-weight: 600;
    font-size: 22px;
    text-align: center;
    margin-bottom: 12px;
  }
  .other-page-list {
    display: flex;
    flex-direction: column;
  }
  .other-page {
    width: 90%;
    max-width: 350px;
    margin: 0 auto 17px;
  }
  .other-page a {
    display: block;
    border: 3px solid #009e6e;
    border-radius: 15px;
    box-shadow: #009e6e 4px 4px 0 0;
    transition: .3s;
  }
  .other-page a img {
    border-radius: 15px;
  }
  .other-page a {
    display: block;
    border-radius: 15px;
    transition: .3s;
    padding: 4px 2%;
  }
  .other-page.nature-mall a {
    border: 3px solid #007457;
    box-shadow: #007457 4px 4px 0 0;
  }
  .other-page.circular-mall a {
    border: 3px solid #b58333;
    box-shadow: #b58333 4px 4px 0 0;
  }
  .other-page.regional-community-mall a {
    border: 3px solid #eaa823;
    box-shadow: #eaa823 4px 4px 0 0;
  }
  .other-page.resilient-mall a {
    border: 3px solid #ea5404;
    box-shadow: #ea5404 4px 4px 0 0;
  }
  .other-page.hearth-wellness-mall a {
    border: 3px solid #01ac9f;
    box-shadow: #01ac9f 4px 4px 0 0;
  }
  .other-page.mall-power-plant a {
    border: 3px solid #0159a7;
    box-shadow: #0159a7 4px 4px 0 0;
  }
  .other-page a:hover {
    box-shadow: none;
    transform: translate(4px, 4px);
  }
  /*=========================
▲▲ conts-mall-list ▲▲
===========================*/
}