@charset "UTF-8";

/*▼▼ pc&sp-共通 ▼▼*/
.color-green {
  background-color: #f6f9f8;
}
#heartful-sustainable {
  font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, "Yu Gothic Medium", 'メイリオ', Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 400;
}
/*▲▲ pc&sp-共通 ▲▲*/

@media screen and (min-width: 770px) {

  /*▼▼ pc-共通 ▼▼*/
  #heartful-sustainable {
    letter-spacing: 0;
  }
  .text {
    font-size: min(calc(18vw*.076), 18px);
  }
  .title_wrap h2 {
    margin-bottom: min(3.8vw, 50px);
  }
  .head_wrap_title {
    font-size: min(calc(36vw * .076), 36px);
    text-align: left;
    margin-bottom: min(calc(21vw*.076), 21px);
    position: relative;
  }
  .head_wrap_title:before {
    content: "";
    display: block;
    width: 2em;
    height: 2px;
    background: #229a66;
    position: absolute;
    top: 0.8em;
    left: -3em
  }
  .head_wrap_text {
    font-size: min(calc(18vw * .076), 18px);
    text-align: left;
  }
  .marker {
    position: relative;
    z-index: 1;
    color: #a7227e;
    font-weight: 600;
  }
  /*▲▲ pc-共通 ▲▲*/
  /*▼▼ conts-action 共通 ▼▼*/
  .head_wrap {
    padding: 0 9%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: min(calc(106vw*.076), 106px);
    margin-top: max(calc(-89vw*.076), -89px);
  }
  .action-title {
    font-weight: 600;
    font-size: min(calc(36vw * .076), 36px);
    text-align: left;
    margin-bottom: min(calc(21vw*.076), 21px);
    position: relative;
  }
  .action-title .title-small {
    font-size: min(calc(18vw * .076), 18px);
    margin-right: 3px;
    font-weight: 700;
  }
  .action-title .title-number {
    font-size: min(calc(34vw * .076), 34px);
    font-weight: 700;
  }
  .action-title .side-icon {
    position: relative;
  }
  .action-title .side-icon:before {
    content: "";
    display: block;
    width: min(calc(110vw*.076), 110px);
    height: min(calc(110vw*.076), 110px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    position: absolute;
    top: -6%;
    right: -3%;
    transform: translate(100%, -50%);
    filter: drop-shadow(6px 8px 5px rgba(0, 0, 0, 0.13));
  }
  .action-title:before {
    content: "";
    display: block;
    width: 2em;
    height: 2px;
    background: #229a66;
    position: absolute;
    top: 2em;
    left: -3em
  }
  .block-title {
    font-size: min(calc(30vw * .076), 30px);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-purple);
    text-align: left;
    margin-bottom: min(calc(11vw*.076), 11px);
  }
  /*▲▲ conts-action 共通 ▲▲*/
  /*=========================
▼▼ conts-fv ▼▼
===========================*/
  #conts_fv {
    position: relative;
    background-color: #f6f9f8;
    padding: min(calc(88vw*.076), 88px) 0 min(calc(105vw*.076), 105px);
  }
  #conts_fv::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background-image: url("../images/common/main_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 22.8%;
    height: min(15.3vw, 233px);
    z-index: 0;
  }
  #conts_fv .top_wrap {
    margin: 0 auto min(calc(78vw*.076), 78px);
    z-index: 2;
    position: relative;
    gap: 3%;
  }
  #conts_fv .top_wrap .img {
    position: absolute;
    width: 54%;
    top: 0;
    right: -6%;
  }
  #conts_fv .top_wrap .text_box {
    width: 52%;
  }
  #conts_fv .top_wrap .text_box .title {
    width: 100%;
    margin-bottom: max(calc(20vw*.076), 20px);
  }
  #conts_fv .scroll_wrap {
    width: 320%;
    max-width: 6000px;
    white-space: nowrap;
    position: absolute;
    top: 32%;
    left: 0%;
    transform-origin: left top;
    z-index: 0;
    animation: storyAnimation 20s linear infinite;
  }
  @keyframes storyAnimation {
    0% {
      transform: translateX(0%)
    }
    100% {
      transform: translateX(-52.9%)
    }
  }
  #conts_fv .bottom_wrap {
    width: 100%;
    background-color: #f6f9f8;
    border-radius: 80px;
    padding: min(calc(61vw*.076), 61px) 8% min(3.8vw, 50px);
    position: relative;
    z-index: 2;
    box-shadow: 26.163px 26.163px 38px 0px rgba(0, 0, 0, 0.13), -2.847px -10.625px 38px 0px rgba(255, 255, 255, 0.84);
  }
  #conts_fv .bottom_wrap::before {
    content: "";
    display: block;
    background-image: url("../images/common/shape_01.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 15.2%;
    height: 136px;
    position: absolute;
    top: -70px;
    left: -9%;
  }
  #conts_fv .bottom_wrap h2 {
    font-size: min(calc(36vw * .076), 36px);
    color: var(--color-purple);
    text-align: left;
    margin-bottom: min(1.5vw, 20px);
  }
  #conts_fv .bottom_wrap h2 .small {
    font-size: min(calc(17vw * .076), 17px);
    display: block;
  }
  #conts_fv .bottom_wrap .text {
    font-size: min(calc(18vw * .076), 18px);
  }
  #conts_fv .bottom_wrap .text-pickup-group {
    margin-bottom: max(calc(-4vw*.076), -4px);
  }
  #conts_fv .bottom_wrap .text-pickup {
    font-size: min(calc(18vw * .076), 18px);
    font-weight: 600;
    margin: max(calc(-10vw*.076), -10px) 0 min(calc(10vw*.076), 10px);
  }
  #conts_fv .bottom_wrap .figure {
    width: 82%;
    margin: min(calc(18vw*.076), 18px) auto 0;
  }
  /*=========================
▲▲ conts-fv ▲▲
===========================*/
  /*=========================
▼▼ conts-action ▼▼
===========================*/
  #conts-action {
    margin-bottom: min(calc(82vw*.076), 82px);
  }
  #conts-action .head_wrap {
    margin-top: max(calc(-2vw*.076), -2px);
    margin-bottom: min(calc(48vw * .076), 48px);
  }
  #conts-action .title_wrap h2 {
    position: relative;
    margin-bottom: min(3.8vw, 50px);
  }
  #conts-action .title_wrap h2::after {
    content: "";
    display: block;
    background-image: url("../images/mallpowerplant/title_img_01.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 505px;
    width: 36.6%;
    height: min(16.8vw, 274px);
    position: absolute;
    top: 0;
    right: 0;
  }
  #conts-action .pagelink_wrapper .pagelink_group {
    display: flex;
    gap: 3%;
  }
  #conts-action .pagelink_wrapper .pagelink {
    width: 32%;
    position: relative;
  }
  #conts-action .pagelink_group li:nth-child(1) {
    transition-delay: 0.1s;
  }
  #conts-action .pagelink_group li:nth-child(2) {
    transition-delay: 0.3s;
  }
  #conts-action .pagelink_group li:nth-child(3) {
    transition-delay: 0.5s;
  }
  #conts-action .pagelink_wrapper .pagelink a::before {
    content: "";
    display: block;
    background-image: url("../images/mallpowerplant/icon_btn_01.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 12%;
    height: 12%;
    position: absolute;
    bottom: -4%;
    left: 50%;
    transform: translateX(-50%);
    transition: .3s;
  }
  #conts-action .pagelink_wrapper .pagelink a:hover::before {
    bottom: -8%;
  }
  #conts-action .pagelink_wrapper .pagelink a {
    display: inline-block;
    padding: min(calc(50vw*.076), 12%);
    border-radius: 50px;
    box-shadow: #dfe9e5 17px 23px 17px;
    border: 3px solid #f6f6f68a;
  }
  #conts-action .pagelink_wrapper .pagelink-title {
    margin-bottom: min(calc(20vw*.076), 20px);
  }
  #conts-action .pagelink_wrapper .action-icon {
    width: 72%;
    margin: 0 auto;
  }
  /*=========================
▲▲ conts-action ▲▲
===========================*/
  /*=========================
▼▼ conts-action-01 ▼▼
===========================*/
  #conts-action-01 {
    background-color: #f6f9f8;
    padding-bottom: min(calc(106vw * .076), 106px);
  }
  #conts-action-01 .head_wrap {
    margin-top: max(calc(-86vw*.076), -86px);
    margin-bottom: min(calc(40vw * .076), 40px);
  }
  #conts-action-01 .action-block {
    width: 50%;
    margin: 0 0 min(calc(115vw * .076), 115px) auto;
    position: relative;
    transition-delay: .2s;
  }
  #conts-action-01 .action-title .side-icon:before {
    background-image: url(../images/mallpowerplant/icon_01.png);
  }
  #conts-action-01 .block-image {
    width: 133%;
    position: absolute;
    top: 50%;
    right: 109%;
    transform: translateY(-50%);
  }
  #conts-action-01 .block-image img {
    border-radius: 80px;
  }
  #conts-action-01 .block-text {
    font-size: min(calc(18vw*.076), 18px);
    margin-bottom: min(calc(22vw*.076), 22px);
  }
  #conts-action-01 .text-wrapper {
    margin-bottom: min(calc(30vw*.076), 30px);
  }
  #conts-action-01 .text-wrapper.h5-margin {
    margin-bottom: max(calc(-6vw*.076), -6px);
  }
  #conts-action-01 .block-sub-title {
    color: var(--color-purple);
    font-size: min(calc(18vw * .076), 18px);
    font-weight: 600;
    text-align: left;
    line-height: 1.6;
    padding-top: min(calc(9vw*.076), 9px);
    margin-bottom: min(calc(7vw*.076), 7px);
  }
  /*▼▼ reverse ▼▼*/
  #conts-action-01 .action-block.reverse {
    margin: 0 auto 0 0;
    padding-bottom: min(calc(110vw * .076), 110px);
    transition-delay: 0s;
  }
  #conts-action-01 .reverse .block-image {
    width: 130%;
    position: absolute;
    top: min(calc(204vw*.076), 204px);
    left: 109%;
  }
  /*▲▲ reverse ▲▲*/
  /*▼▼ 発電電力使用モール ▼▼*/
  .use-mall-list .container {
    width: 96%;
    max-width: 980px;
    margin: 0 auto
  }
  .use-mall-list .spread_title {
    width: 68%;
    margin: 0 auto 5rem;
  }
  .use-mall-list .detail_box {
    width: 76%;
    padding: 4rem 7% 1.2rem;
    margin: 0 auto;
    background-color: #005BAB;
    border-radius: 2rem;
  }
  .use-mall-list .detail_text {
    width: 85%;
    font-size: 1.6rem;
    margin: 0 auto 3rem;
  }
  .use-mall-list .conts_box {
    display: flex;
    color: #fff;
    text-align: left;
    margin-bottom: 2rem;
    justify-content: center;
  }
  .use-mall-list .text {
    font-size: min(calc(14vw*.076), 14px);
    line-height: 1.8;
    text-align: left;
    width: 88%;
    letter-spacing: 0;
  }
  .use-mall-list .highlight {
    display: inline-block;
    font-size: 1.1em;
    color: #fff100;
    font-weight: 600;
  }
  .use-mall-list .btn_wrapper {
    width: 69%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  body:not(.tab_view) .use-mall-list .btn:hover {
    background: none;
  }
  .use-mall-list .btn {
    padding: 0;
    font-size: inherit;
    text-align: center;
    text-decoration: none !important;
    line-height: 1;
    background: transparent;
    border-radius: 0;
    border: none;
  }
  .use-mall-list .btn::after {
    display: none;
  }
  .use-mall-list .btn button {
    width: 100%;
    color: #005BAB;
    max-width: 28rem;
    font-size: min(calc(14vw*.076), 14px);
    padding-inline: 5%;
    margin: 0 auto;
    display: block;
    padding: 2.3rem 3.7rem;
    background-color: #fff100;
    font-weight: bold;
    border-radius: 4rem;
    line-height: 1;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
  }
  .use-mall-list .btn button:hover {
    color: #005BAB;
    background-color: #fff;
  }
  .use-mall-list .caution_text {
    text-align: center;
    font-size: min(calc(12vw*.076), 12px);
    line-height: 1.8;
    color: #fff;
    text-indent: -1em;
    padding-left: 1em;
    margin-top: 1rem;
  }
  /*▲▲ 発電電力使用モール ▲▲*/
  /*=========================
▲▲ conts-action-01 ▲▲
===========================*/
  /*=========================
▼▼ conts-action-02 ▼▼ 
===========================*/
  #conts-action-02 {
    margin-bottom: min(calc(186vw*.076), 186px);
  }
  #conts-action-02 .action-title .side-icon:before {
    background-image: url("../images/mallpowerplant/icon_02.png");
  }
  #conts-action-02 .head_wrap {
    margin-bottom: min(calc(86vw * .076), 86px);
  }
  #conts-action-02 .action-block {
    width: 50%;
    margin: 0 0 0 auto;
    position: relative;
  }
  #conts-action-02 .block-title {
    margin-bottom: min(calc(29vw * .076), 29px);
  }

  #conts-action-02 .block-image-01 {
    width: 81%;
    position: absolute;
    top: max(calc(-50vw*.076), -50px);
    left: -119%;
  }
  #conts-action-02 .block-image-02 {
    width: 81%;
    position: absolute;
    top: min(calc(141vw*.076), 141px);
    left: -89%;
  }
  #conts-action-02 .action-block img {
    border-radius: 50px;
  }
  #conts-action-02 .block-text {
    font-size: min(calc(18vw*.076), 18px);
    margin-bottom: min(calc(22vw*.076), 22px);
  }
  #conts-action-02 .block-sub-title {
    color: var(--color-purple);
    font-size: min(calc(18vw * .076), 18px);
    font-weight: 600;
    text-align: left;
    line-height: 1.3;
    margin-bottom: min(calc(7vw*.076), 7px);
  }
  /*=========================
▲▲ conts-action-02 ▲▲
===========================*/
  /*=========================
▼▼ conts-action-03 ▼▼
===========================*/
  #conts-action-03 .action-block {
    width: 51%;
    margin: 0 0 min(calc(115vw * .076), 115px) auto;
    position: relative;
  }
  #conts-action-03 .block-image {
    width: 131%;
    position: absolute;
    top: 56%;
    left: 106%;
    transform: translateY(-50%);
  }
  #conts-action-03 .block-image img {
    border-radius: 80px;
  }
  #conts-action-03 .block-text {
    font-size: min(calc(18vw*.076), 18px);
    line-height: 1.8;
    margin-bottom: min(calc(18vw*.076), 18px);
  }
  #conts-action-03 {
    background-color: #f6f9f8;
    padding-bottom: min(calc(37vw*.076), 37px);
  }
  #conts-action-03 .action-title .side-icon:before {
    background-image: url("../images/mallpowerplant/icon_03.png?20260217");
  }
  #conts-action-03 .head_wrap {
    margin-bottom: min(calc(85vw * .076), 85px);
  }
  #conts-action-03 .action-block {
    margin: 0 auto min(calc(115vw * .076), 115px) 0;
  }
  #conts-action-03 .action-block .block-title {
    margin-bottom: min(calc(15vw*.076), 15px);
  }
  /*=========================
▲▲ conts-action-03 ▲▲
===========================*/
  /*=========================
▼▼ conts-outlook ▼▼
===========================*/
  #conts-outlook {
    padding-bottom: min(calc(80vw*.076), 80px);
  }
  #conts-outlook .head_wrap {
    padding-top: min(calc(43vw*.076), 43px);
    margin-bottom: 0;
  }
  #conts-outlook .head_wrap_title {
    margin-bottom: min(calc(37vw * .076), 37px);
  }
  #conts-outlook .head_wrap_text {
    padding-left: 9%;
    margin-bottom: min(calc(24vw*.076), 24px);
  }
  #conts-outlook .flex-wrap {
    display: flex;
    gap: 3%;
    margin-bottom: min(calc(85vw*.076), 85px);
    flex-direction: column;
  }
  #conts-outlook .img-outlook {
    margin: min(calc(45vw*.076), 45px) auto 0;
    width: 63%;
  }
  /*=========================
▲▲ cconts-outlook ▲▲
===========================*/
  /*=========================
▼▼ conts-mall-list ▼▼
===========================*/
  #conts-mall-list {
    margin-bottom: min(calc(100vw*.076), 100px);
  }
  #conts-mall-list .title_wrap h2 {
    margin-bottom: min(calc(29vw*.076), 29px);
  }
  .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);
  }
  .other-page-list {
    display: flex;
    flex-wrap: wrap;
    gap: 3%;
    justify-content: center;
  }
  .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.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) {

  /*▼▼ sp-共通 ▼▼*/
  #heartful-sustainable {
    width: 100%;
    font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, "Yu Gothic Medium", 'メイリオ', Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 11px;
    color: #000;
    line-height: 1.8;
    overflow: hidden;
    padding: 0;
    font-feature-settings: normal;
    letter-spacing: -.04em;
  }
  /*▼▼ sp-共通 ▼▼*/

  .text {
    font-size: 15px;
    font-weight: 400;
  }
  .head_wrap_title {
    font-size: 24px;
    text-align: left;
    margin-bottom: 27px;
  }
  .head_wrap_text {
    font-size: 15px;
    line-height: 1.9;
    font-weight: 400;
  }
  .title_wrap h2 {
    position: relative;
    margin-bottom: 50px;
    margin-top: 15px;
    width: 90%;
    max-width: 500px;
  }
  .title_wrap h2::after {
    content: "";
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 70%;
    height: min(33.8vw, 180px);
    position: absolute;
    top: -15px;
    right: -10vw;
  }
  .marker {
    position: relative;
    z-index: 1;
    color: #a7227e;
    font-weight: 600;
  }
  /*▲▲ sp-共通 ▲▲*/

  /*▼▼ conts-action 共通 ▼▼*/
  .head_wrap {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 30px;
  }
  .action-title {
    font-weight: 600;
    font-size: 24px;
    text-align: left;
    margin-bottom: 21px;
    position: relative;
  }
  .action-title .title-small {
    font-size: 15px;
    margin-right: 3px;
    font-weight: 700;
    position: relative;
    top: -10px;
  }
  .action-title .title-number {
    font-size: 29px;
    font-weight: 700;
    position: relative;
    top: -8px;
  }
  .action-title {
    position: relative;
  }
  .action-title .title-number:after {
    content: "";
    display: block;
    width: 60px;
    height: 60px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    position: absolute;
    top: 2vw;
    left: -2vw;
    transform: translate(100%, -50%);
    filter: drop-shadow(4px 6px 3px rgba(0, 0, 0, 0.13));
  }
  .block-title {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-purple);
    text-align: left;
    margin-bottom: 15px;
  }
  /*▲▲ conts-action 共通 ▲▲*/
  /*=========================
▼▼ conts-fv ▼▼
===========================*/
  #conts_fv {
    position: relative;
    padding: 40px 0 55px;
  }
  #conts_fv::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background-image: url("../images/common/main_bg.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 150px;
    height: 99px;
    z-index: 0;
  }
  #conts_fv .top_wrap {
    margin: 0 auto 20px;
    z-index: 2;
    position: relative;
  }
  #conts_fv .top_wrap .text_box {
    margin-bottom: 20px;
  }
  #conts_fv .top_wrap .text_box .title {
    max-width: 500px;
    margin: 0 auto 10px;
  }
  #conts_fv .top_wrap .text_box .text {
    font-size: 15px;
  }
  #conts_fv .top_wrap .img {
    width: 92%;
    max-width: 450px;
    margin: 0 auto;
  }
  #conts_fv .scroll_wrap {
    width: 500%;
    white-space: nowrap;
    transform-origin: left top;
    animation: storyAnimation 30s linear infinite
  }
  @keyframes storyAnimation {
    0% {
      transform: translateX(0%)
    }
    100% {
      transform: translateX(-52.9%)
    }
  }
  #conts_fv .bottom_wrap {
    background-color: #f6f9f8;
    border-radius: 20px;
    margin-top: -24px;
    padding: 34px 5% 36px;
    position: relative;
    z-index: 2;
    box-shadow: 4.163px 4.163px 10px 0px rgba(0, 0, 0, 0.13), -8.847px -10.625px 38px 0px rgba(255, 255, 255, 0.84);
  }
  #conts_fv .bottom_wrap::before {
    content: "";
    display: block;
    background-image: url("../images/common/shape_01.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 29.2%;
    height: 100px;
    position: absolute;
    top: -50px;
    left: -12%;
  }
  #conts_fv .bottom_wrap h2 {
    font-size: 24px;
    line-height: 1.3;
    color: var(--color-purple);
    text-align: left;
    margin-bottom: 10px;
  }
  #conts_fv .bottom_wrap h2 .small {
    font-size: 16px;
    margin-bottom: 5px;
    display: block;
  }
  #conts_fv .bottom_wrap .text {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 25px;
  }
  #conts_fv .bottom_wrap .text-pickup {
    font-size: 15px;
    line-height: 1.6;
    font-weight: 600;
    margin: 12px 0;
  }
  /*=========================
▲▲ conts-fv ▲▲
===========================*/
  /*=========================
▼▼ conts-action ▼▼
===========================*/
  #conts-action .title_wrap h2::after {
    background-image: url(../images/mallpowerplant/title_img_01.png);
  }
  #conts-action .head_wrap {
    margin-top: -70px;
    margin-bottom: 30px;
  }
  #conts-action {
    margin-bottom: 55px;
  }
  .pagelink_wrapper.pagelink_title_block {
    padding: 0 6%;
    margin-bottom: 75px;
  }
  .pagelink_wrapper.pagelink_title {
    width: 43%;
    padding-top: 27px;
    margin-bottom: 36px;
  }
  .pagelink_wrapper.figure {
    position: absolute;
    width: 50%;
    top: 14px;
    left: 48%;
  }
  .pagelink_wrapper.figure img {
    border-radius: 50px;
    border: 2px solid #acdece;
  }
  .pagelink_wrapper.text {
    width: 38%;
  }
  .pagelink_wrapper.pagelink_group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  .pagelink_wrapper.pagelink_group .pagelink {
    width: calc(100% / 3 - 20px);
  }
  .pagelink_wrapper.pagelink_group .pagelink a {
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: #219a66;
    background-color: #f6f9f8;
    border-radius: 30px;
    padding: 24px 2% 26px;
    box-shadow: 26.163px 26.163px 38px 0px rgba(0, 0, 0, 0.13), -2.847px -10.625px 38px 0px rgba(255, 255, 255, 0.84);
  }
  .pagelink_wrapper .pagelink_group {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  .pagelink_wrapper .pagelink {
    max-width: 450px;
    position: relative;
    margin-bottom: 40px;
  }
  .pagelink_wrapper .pagelink a::before {
    content: "";
    display: block;
    background-image: url("../images/mallpowerplant/icon_btn_01.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 8%;
    height: 34%;
    position: absolute;
    bottom: -14%;
    left: 50%;
    transform: translateX(-50%);
    transition: .3s;
  }
  .pagelink_wrapper .pagelink a:hover::before {
    bottom: -18%;
  }
  .pagelink_wrapper .pagelink a {
    display: inline-block;
    padding: min(calc(50vw*.076), 12%);
    border-radius: 30px;
    box-shadow: #dfe9e5 14px 20px 14px;
    border: 2px solid #f6f6f68a;
    display: flex;
    gap: 5%;
  }
  .pagelink_wrapper .pagelink-title {
    width: 58%;
    margin-bottom: min(calc(20vw*.076), 20px);
  }
  .pagelink_wrapper .action-icon {
    width: 25%;
    margin: 0 auto;
  }
  /*=========================
▲▲ conts-action ▲▲
===========================*/
  /*=========================
▼▼ conts-action-01 ▼▼
===========================*/
  #conts-action-01 {
    padding: 5px 0 65px;
  }
  #conts-action-01 .head_wrap {
    margin-top: -60px;
  }
  #conts-action-01 .action-block {
    margin: 0 auto 25px;
    position: relative;
  }
  #conts-action-01 .action-title .title-number::after {
    background-image: url("../images/mallpowerplant/icon_01.png");
  }
  #conts-action-01 .block-image {
    max-width: 450px;
    margin: 0 auto 15px;
  }
  #conts-action-01 .block-image img {
    border-radius: 30px;
  }

  #conts-action-01 .block-text {
    font-size: 15px;
    margin-bottom: 15px;
  }
  #conts-action-01 .text-wrapper {
    margin-bottom: 15px;
  }
  #conts-action-01 .block-sub-title {
    color: var(--color-purple);
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    line-height: 1.6;
    margin-bottom: 10px;
  }
  /*▼▼ reverse ▼▼*/
  #conts-action-01 .action-block.reverse {
    margin: 0 auto 0 0;
  }
  #conts-action-01 .reverse .block-image {
    width: 130%;
    position: absolute;
    top: 204px;
    left: 109%;
  }
  /*▲▲ reverse ▲▲*/
  /*▼▼ 発電電力使用モール ▼▼*/
  .use-mall-list .container {
    width: 80%;
    max-width: 430px;
    margin: 55px auto 0;
  }
  .use-mall-list .spread_title {
    width: 95%;
    margin: 0 auto 24px;
  }
  .use-mall-list .detail_box {
    display: block;
    width: 100%;
    padding: 30px 5% 24px;
    margin: 0 auto;
    background-color: #005BAB;
    border-radius: 2rem;
  }
  .use-mall-list .conts_box {
    display: block;
    width: 100%;
    color: #fff;
    text-align: left;
    margin-bottom: 3px;
  }

  .use-mall-list .conts_box .text {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 16px;
  }
  .use-mall-list .highlight {
    display: inline-block;
    font-size: 1.1em;
    color: #fff100;
    font-weight: 600;
  }
  .use-mall-list .detail_text {
    width: 85%;
    max-width: 430px;
    margin: 0 auto 18px;
  }
  .use-mall-list .spread .text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 16px;
  }
  .use-mall-list .btn_wrapper {
    width: 100%;
  }
  .use-mall-list .btn_wrapper .btn {
    width: 100%;
    padding: 0;
    font-size: 18px;
    text-align: center;
    text-decoration: none !important;
    line-height: 1;
    background: transparent;
    border-radius: 0;
    border: none;
  }
  .use-mall-list .btn::after {
    display: none;
  }
  .use-mall-list .btn_wrapper button {
    max-width: 270px;
    color: #005BAB;
    font-size: 16px;
    margin: 0 auto;
  }
  .use-mall-list .btn_wrapper button:hover {
    color: #005BAB;
    background-color: #fff;
  }
  .use-mall-list .btn_wrapper .caution_text {
    font-size: 1.2rem;
    font-weight: 400;
    text-align: left;
    line-height: 1.6;
    letter-spacing: -.02em;
    margin-top: 1rem;
  }
  /*▲▲ 発電電力使用モール ▲▲*/
  /*=========================
▲▲ conts-action-01 ▲▲
===========================*/
  /*=========================
▼▼ conts-action-02 ▼▼ 
===========================*/
  #conts-action-02 {
    margin-bottom: 55px;
  }
  #conts-action-02 .head_wrap {
    margin-top: -60px;
  }
  #conts-action-02 .action-title .title-number::after {
    background-image: url("../images/mallpowerplant/icon_02.png");
  }
  #conts-action-02 .block-image-01, #conts-action-02 .block-image-02 {
    max-width: 450px;
    margin: 0 auto 15px;
  }
  #conts-action-02 .action-block img {
    border-radius: 30px;
  }
  #conts-action-02 .block-text {
    font-size: 15px;
    margin-bottom: 10px;
  }
  #conts-action-02 .block-sub-title {
    color: var(--color-purple);
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    line-height: 1.6;
    margin-bottom: 7px;
  }

  /*=========================
▲▲ conts-action-02 ▲▲
===========================*/
  /*=========================
▼▼ conts-action-03 ▼▼
===========================*/
  #conts-action-03 .head_wrap {
    margin-top: -60px;
  }

  #conts-action-03 .block-image {
    max-width: 450px;
    margin: 0 auto 10px;
  }
  #conts-action-03 .block-image img {
    border-radius: 30px;
  }
  #conts-action-03 .block-text {
    font-size: 15px;
    margin-bottom: 22px;
  }
  #conts-action-03 {
    background-color: #f6f9f8;
    padding-bottom: 33px;
    padding-top: 5px;
  }
  #conts-action-03 .action-title .title-number::after {
    background-image: url("../images/mallpowerplant/icon_03.png?20260217");
  }
  /*=========================
▲▲ conts-action-03 ▲▲
===========================*/
  /*=========================
▼▼ conts-outlook ▼▼
===========================*/
  #conts-outlook {
    margin-bottom: 50px;
  }
  #conts-outlook .head_wrap {
    margin-top: -70px;
    margin-bottom: 30px;
  }
  #conts-outlook .head_wrap .head_wrap_title {
    margin-bottom: 20px;
  }
  #conts-outlook .img-outlook {
    width: 100%;
    max-width: 600px;
    margin: 40px auto 0;
  }
  /*=========================
▲▲ conts-outlook ▲▲
===========================*/
  /*=========================
▼▼ conts-mall-list ▼▼
===========================*/
  #conts-mall-list {
    margin-bottom: 100px;
  }
  #conts-mall-list h2 {
    margin-bottom: 20px;
  }
  .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 a:hover {
    box-shadow: none;
    transform: translate(4px, 4px);
  }
  /*=========================
▲▲ conts-mall-list ▲▲
===========================*/
}