@charset "UTF-8";
/* ===================================================================
CSS information

 file name  :copy.css
 author     :Ability Consultant
style info  :住宅用太陽光発電
=================================================================== */

#homecare {
  overflow-x: clip; /* sticky適用のためoverflow:hiddenを解除 */
  overflow-y: visible;
}

/* 全般設定 */
img {
  max-width: 100%;
  vertical-align: bottom;
}

.wrapper-img {
  img {
    width: 100%;
  }
}

/*----------------------------------------------------
	汎用コンポーネント ttl系はhomecare.cssに記載
----------------------------------------------------*/

/* リスト */
/* @media狭くなりやすいので縦積みを見た目基準で早めに切り替えています。 */
@scope (.c-list-txtImg) {
  /* テキストと画像を並べる2カラムリスト */
  :scope:where(div),
  :scope > li {
    /* リストではない時とリストの時の子要素に対して */
    display: grid;
    column-gap: var(--gap-flex-x);
    row-gap: var(--my-xs);
    grid-template-columns: repeat(2, 1fr);

    &:not(div, li:first-child) {
      margin-top: var(--my-large);
    }

    &:has(.c-list-txtImg__ttl) {
      /* タイトルがある場合 */
      grid-template-rows: auto 1fr;
      grid-template-areas:
        "img ttl"
        "img txt";

      .c-list-txtImg__txt {
        grid-area: txt;
      }

      .c-list-txtImg__img {
        grid-area: img;
      }
    }
  }

  .c-list-txtImg__ttl,
  .c-lead {
    /* 見出しデザインのみ */
    /* 見出しレベルをhtmlタグのdata-h-levelに設定してください(h3~h5) */
    color: var(--color-cats);
    font-family: var(--font-mincho);
    font-size: var(--font-size-h4);
    font-weight: bold;

    /* font-size変更 */
    &:is([data-hLevel="h3"]) {
      font-size: var(--font-size-h3);
    }
    &:is([data-hLevel="h4"]) {
      font-size: var(--font-size-h4);
    }
    &:is([data-hLevel="h5"]) {
      font-size: var(--font-size-h5);
    }
  }

  .c-list-txtImg__ttl {
    /* タイトルを独立して制御したいときはこのクラスを使用（主にSP版の並び順） */
    grid-area: ttl;

    &:not(:has(.c-list__counter)) {
      /* カウンターは余白が大きくなるため、無い場合のみPC版で下余白を追加する*/
      @media screen and (min-width: 480px) {
        margin-bottom: var(--my-small);
      }
    }
  }

  .c-lead {
    margin-bottom: var(--my-small);
  }

  @media screen and (max-width: 575px) {
    :scope:where(div),
    :scope > li {
      &:not(div, li:first-child) {
        margin-top: var(--my-large);
      }

      /* 見出しがある時とないときの場合分け */
      &:not(:has(.c-list-txtImg__ttl)) {
        display: flex;
        flex-direction: column-reverse;
      }
      &:has(.c-list-txtImg__ttl) {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
          "ttl"
          "img"
          "txt";
      }
    }
  }
}

.c-list-txtImg--reverse {
  /* 交互レイアウト */
  > li:nth-child(even) {
    &:not(:has(.c-list-txtImg__ttl)) {
      display: flex;
      flex-direction: row-reverse;
    }
    &:has(.c-list-txtImg__ttl) {
      grid-template-areas:
        "ttl img"
        "txt img";
    }
  }

  @media screen and (max-width: 575px) {
    > li:nth-child(even) {
      &:not(:has(.c-list-txtImg__ttl)) {
        flex-direction: column-reverse;
      }

      &:has(.c-list-txtImg__ttl) {
        grid-template-areas:
          "ttl"
          "img"
          "txt";
      }
    }
  }
}

.c-list__counter {
  /* 番号アイコン付きリスト--リスト内のタイトルにspanを設定し、番号前の任意テキストだけHTML側に記述する */
  --size: 4em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  background-color: var(--color-cats);
  font-size: small;
  color: #fff;
  text-align: center;

  &::after {
    content: counter(list);
    font-size: var(--font-size-h4);

    /* font-size変更 */
    &:is([data-hLevel="h3"]) {
      font-size: var(--font-size-h3);
    }
    &:is([data-hLevel="h4"]) {
      font-size: var(--font-size-h4);
    }
    &:is([data-hLevel="h5"]) {
      font-size: var(--font-size-h5);
    }
  }
}

*:has(> .c-list__counter) {
  display: flex;
  align-items: center;
  column-gap: var(--mx-small);
}

:is(ul, ol):has(.c-list__counter) {
  /* カウンター処理 */
  counter-reset: list;

  > li {
    counter-increment: list;
  }
}

/* ボタン */
.c-btn {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  padding-block: 0.5rem;
  background-color: var(--color-txt);
  color: #fff;
  text-align: center;
  text-decoration: none !important;

  &:hover {
    filter: brightness(1.2);
  }

  @media screen and (max-width: 479px) {
    margin-top: 1.875rem;
  }
}

/* おすすめ */
@scope (.c-recommending) {
  --w-border: 10px;
  --color-border: rgba(0, 164, 150, 0.6);
  :scope {
    display: flex;
    align-items: center;
    row-gap: var(--my-small);

    justify-content: space-around;
    flex-wrap: wrap;
    padding: 3.75rem 2.5rem;
    /* 枠線 */
    border: solid var(--w-border) transparent;
    background-image:
      linear-gradient(#fff, #fff),
      repeating-linear-gradient(
        60deg,
        var(--color-border) 0 1px,
        transparent 1px 3px
      );
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    box-sizing: content-box;

    font-weight: 700;
  }
  .c-recommending__ttl {
    text-align: center;
    > :is(h2, h4, h5, h6) {
      font-family: revert;
      font-size: var(--font-size-h3);
    }
    > p {
      --hukidashi: 0.625rem; /* 吹き出しのしっぽサイズ */
      position: relative;
      width: fit-content;
      margin-bottom: calc(var(--hukidashi) + var(--my-xs));
      margin-inline: auto;
      padding-inline: 1.25rem;
      background-color: var(--color-cats);
      color: #fff;
      &::after {
        content: "";
        display: block;
        position: absolute;
        bottom: calc(var(--hukidashi) * -1);
        left: 50%;
        width: var(--hukidashi);
        height: var(--hukidashi);
        background-color: var(--color-cats);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
      }
    }
  }
  .c-recommending__list {
    display: flex;
    flex-direction: column;
    gap: var(--my-small);
    font-size: var(--font-size-h5);
    font-weight: 400;

    > li {
      display: flex;
      gap: var(--mx-small);
      &::before {
        content: "\f14a";
        color: var(--color-cats);
        font-family: "Font Awesome 7 Free";
      }
    }
  }

  @media screen and (max-width: 479px) {
    :scope {
      padding: 2.5rem 1.25rem;
    }
  }
}

/* アコーディオン */
@scope (.c-accordion) {
  summary:hover,
  details[open] summary {
    /* responsive.cssのスタイル打消し */
    background-color: transparent;
    margin-bottom: inherit;
  }

  :scope {
    padding-inline: var(--my-xs);
    list-style: none;

    > li {
      border-bottom: solid 1px var(--color-gray);
    }

    > li:not(:first-child) {
      margin-top: var(--my-small);
    }
  }

  .c-accordion__summary {
    --font-size-summary: var(--font-size-h5);
    display: flex;
    gap: var(--my-xs);
    justify-content: space-between;
    padding-bottom: var(--my-xs);
    background-color: transparent;
    cursor: pointer;
    font-size: var(--font-size-summary);
    line-height: 1.6;
    list-style: none; /*accordion__summaryのデフォルト矢印を消す*/
    text-align: left;

    &::after {
      /* 矢印など、開閉記号 */
      content: "\2b";
      height: fit-content;
      font-family: "Font Awesome 7 Free";
      font-weight: 700;
      transition: rotate 250ms ease;
    }
  }

  accordion__summary::-webkit-accordion__details-marker {
    display: none;
  }

  .c-accordion__content {
    /*grid-template-rowsで高さを可変にする*/
    /* contentに対するスタイルはここに指定 */
    display: grid;
    transition: 250ms grid-template-rows ease;
  }

  .c-accordion__inner-txt {
    overflow: hidden;
  }

  .c-accordion__txt {
    /* 開いた部分の余白はここに指定 */
    padding-bottom: var(--my-small);
  }

  .c-accordion__details:is([open]) {
    /* 開閉時オプション */
    .c-accordion__summary {
      &::after {
        /* 矢印など、開閉記号アニメーション */
        content: "\f068";
        rotate: 180deg;
        transform-origin: center;
      }
    }
  }

  @media screen and (max-width: 479px) {
    summary {
      /* responsive.css初期化 */
      all: inherit;
      &::after {
        content: "\2b";
        position: static;
        transform: translateY(0);
        font-family: "Font Awesome 7 Free";
        font-weight: 700;
        transition: rotate 250ms ease;
      }
    }

    details[open] summary::after {
      content: "\f068";
      position: static;
      height: fit-content;
      rotate: 180deg;
      transform-origin: center;
      transform: translateY(0);
    }
  }
}

@scope (.c-accordion--icon) {
  --size-icon: 1.875rem;
  --font-size-icon: var(--font-size-h3);
  --color-bg-icon: var(--color-cats);

  /* 文頭アイコン付きアコーディオン */
  .c-accordion__summary,
  .c-accordion__txt {
    --color-bg-icon: #c8ebe8;
    display: grid;
    gap: var(--mx-small);
    padding-top: 0.5lh; /* アイコンと高さを合わせる.marginの相殺を避けるためpadding */

    &::before {
      /* 文頭アイコン */
      display: grid;
      place-content: center;
      width: var(--size-icon);
      height: var(--size-icon);
      margin-top: calc(-0.5lh / 2);
      background-color: var(--color-bg-icon);
      font-size: var(--font-size-icon);
      font-weight: 600;
    }
  }

  .c-accordion__summary {
    --color-bg-icon: #c8ebe8;
    grid-template-columns: min-content 1fr min-content;

    &::before {
      content: "Q";
    }
  }

  .c-accordion__txt {
    --color-bg-icon: #fbdce4;
    grid-template-columns: min-content 1fr;

    &::before {
      /* 文頭アイコン */
      content: "A";
    }
  }
}

/* ブロック型セクション(特徴など) */
/* コンテンツごとに大きく配置が変わるため、SP版はレイアウトの共通設定をしていません。
各コンテンツで個別設定してください */
section:has(> .c-block) {
  /* paddingだとタイトル上に余白が空いてしまうためmarginに置き換える */
  margin-top: var(--py-medium);
  border: solid 1px var(--color-gray);

  padding-block: 0 1.875rem;
}

@scope (.c-block) {
  :scope {
    display: grid;
    padding-inline: var(--px-contents-inner);
  }

  .c-block__ttl {
    grid-area: ttl;
    margin-bottom: var(--my-small);
    font-size: var(--font-size-h4);
    text-align: center;
  }

  :scope:not(ol, ul) {
    padding-top: var(--px-contents-inner);
    margin-inline: var(--px-contents-inner);
    border-top: solid 1px var(--color-gray);
  }

  /* コンテンツをgrid配置する際の名前 */
  /* 配置は各セクションで行ってください。 */
  .c-block__txt {
    grid-area: txt;
  }
  .c-block__img {
    grid-area: img;

    /* safari表示調整 */
    img {
      height: auto;
      object-fit: contain;
    }
  }
  .c-block__fig {
    grid-area: fig;
    align-self: end;

    /* safari表示調整 */
    img {
      height: auto;
      object-fit: contain;
    }
  }

  /* 複数項目ある場合のレイアウト */
  /* 2列組。配置は各セクションで行ってください。 */
  :scope:where(ol, ul) {
    counter-reset: block;
    list-style: block;
    grid-template-columns: repeat(2, 1fr);

    > li {
      counter-increment: block;
      position: relative;
      padding: var(--px-contents-inner);
      padding-top: 1.5rem;
      border-top: solid 1px var(--color-gray);

      &::before {
        content: "特徴" counter(block, decimal-leading-zero);
        display: inline-block;
        position: absolute;
        top: 0;
        left: 50%;
        translate: -50% -50%;
        padding-inline: 4px;
        background-color: var(--color-gray);
        color: #fff;
        font-size: var(--font-size-h5);
        text-box-trim: trim-both;
      }
    }
  }
}

/* SP版 */
/* 多めに余白を取っているので早めに切り替える */
@media screen and (max-width: 575px) {
  section:has(> .c-block) {
    margin-inline: 0;
    padding-bottom: 0;
    border: none;
  }

  @scope (.c-block) {
    :scope {
      padding-inline: 0;
    }

    :scope:not(ol, ul) {
      margin-inline: 0;
    }

    :scope:where(ol, ul) {
      padding-inline: 0;
    }
  }
}

/*----------------------------------------------------
	swiper
----------------------------------------------------*/
.swiper {
  --swiper-theme-color: var(--color-txt);
  z-index: 1;
}
.swiper-button-prev,
.swiper-button-next {
  --swiper-navigation-sides-offset: 4px;
  justify-content: flex-start;
  &::before {
    content: "\f0d9";
    color: #fff;
    font-family: "Font Awesome 7 Free";
    font-size: 40px;
    font-weight: 700;
  }
}

.swiper-button-next {
  rotate: 180deg;
}

/*-----------------------------------------------------------
	背景グラデ指定
-----------------------------------------------------------*/
#contents {
  background: transparent url("../homecare/images/solar/bg_cnt.png") left bottom
    repeat-x;
}

#contents #contents-inner {
  background: none;
}

/*----------------------------------------------------
	太陽光発電とは #about
----------------------------------------------------*/

/* 特徴 */
@scope (#about_feature) {
  :scope {
    container: block / inline-size;
  }

  @scope (.c-block) {
    :scope {
      > li {
        &:first-child {
          grid-column: 1/3;
          display: grid;
          column-gap: var(--gap-flex-x);
          grid-template-columns: repeat(2, 1fr);
          grid-template-areas:
            "ttl ttl"
            "img txt"
            "img fig";
        }

        &:nth-child(even) {
          border-right: solid 1px var(--color-gray);
        }

        p {
          text-align: justify;
        }
      }

      @container block (width < 576px) {
        /* 縦積みだけ早めに切り替える */
        grid-template-columns: 1fr;

        > li {
          &:first-child {
            grid-column: auto;
          }

          &:nth-child(even) {
            border-right: none;
          }
        }
      }
    }
  }

  .about__feature-women {
    width: 200px;
    margin-top: -100px;
  }

  .about__feature-list {
    margin-bottom: var(--my-xs);
    margin-left: 1.25em;
    color: var(--color-red);
    > li {
      list-style-type: disc;
    }
  }

  /* SP版 */
  @media screen and (max-width: 479px) {
    @scope (.c-block) {
      :scope > li {
        row-gap: var(--my-xs);

        &:first-child {
          grid-template-areas:
            "ttl ttl"
            "img img"
            "txt txt"
            ". fig";
        }
      }
    }

    .about__feature-women {
      width: 100%;
      margin-top: 0;
    }
  }
}

/* 出来ること */
@scope (#about_product) {
  .list {
    > li:not(:first-child) {
      margin-top: var(--my-large);
    }
  }

  .list__ttl {
    font-size: var(--font-size-h4);
  }

  .list__txt {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: clamp(
      0rem,
      -2.5532rem + 8.5106vw,
      2.5rem
    ); /* ボタン上余白。画面が縮んで行数が増えた分余白を減らす。480px~980px0~40px */
  }

  /* SP版 */
  @media screen and (max-width: 479px) {
    .list > li:not(:first-child) {
      margin-top: 3.75rem;
    }

    .list__txt {
      padding-bottom: 0;
    }
  }
}

/*----------------------------------------------------
	太陽光発電システム #solar-power-system
----------------------------------------------------*/
@scope (.banner) {
  :scope {
    /* 流用の可能性があるためグローバルに置いています */
    display: grid;
    place-content: center;
    gap: var(--my-xs);
    position: relative;
    margin-top: var(--my-large);
    padding: 1em 0.5rem;
    background-blend-mode: soft-light;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(../homecare/images/solar/about_product01.jpg);
    background-position: center 40%;
    background-size: cover;
    color: #fff;
    font-size: var(--font-size-h2);
    font-weight: 700;
    text-decoration: none !important;
    overflow: hidden;
    text-align: center;

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      width: 0;
      height: 0;
      mix-blend-mode: soft-light;
      background-color: #fff;
      border-radius: 100vh;
      opacity: 0.7;
      transition: all 300ms ease-in;
    }

    &:hover::before {
      width: 110%;
      height: auto;
      aspect-ratio: 1 / 1;
    }
  }

  .banner__sub {
    font-size: var(--font-size-h5);
  }
}

/*----------------------------------------------------
	蓄電池 #battery
----------------------------------------------------*/
/* 特徴 */
@scope (#battery_feature) {
  :scope {
    container: block / inline-size;
  }

  .c-block {
    column-gap: 1rem;
    grid-template-columns: 1fr 1.5fr;
    grid-template-areas:
      "ttl ttl"
      "txt fig";
  }

  .c-block__ttl {
    width: fit-content;
    margin-inline: auto;
    > p {
      margin-top: var(--my-xs);
      background-color: var(--color-red);
      color: #fff;
      font-size: var(--font-size-h5);
      text-box-trim: trim-both;
    }
  }

  @scope (.c-block__fig) {
    :scope {
      display: grid;
      gap: var(--mx-small) 0.75rem;
      grid-template-columns: 2fr 1fr;
      grid-template-areas:
        "img conclusion"
        "table conclusion"
        "txt txt";
    }

    img {
      height: auto;
    }

    @scope (.fig__img) {
      :scope {
        grid-area: img;
        color: var(--color-cats);
        font-size: var(--font-size-h4);
        font-weight: 700;
      }

      > p {
        margin-right: -0.75rem; /* 句点のトリミングによる改行回避 */
      }
    }

    @scope (.fig__table) {
      :scope {
        grid-area: table;
        line-height: 1.1;
      }

      :is(th, td) {
        padding: 4px 4px 2px;
      }

      th {
        background-color: var(--color-bright);
        border: solid 1px var(--color-txt);
        text-align: center;
      }

      td {
        border: solid 1px var(--color-txt);
        text-align: right;
      }

      .arrow {
        background-color: #fff;
        border-color: transparent var(--color-txt);

        &:is(th) {
          border-right-color: transparent;
        }
      }

      .total {
        border-color: transparent transparent var(--color-txt);
      }
    }

    .fig__txt {
      grid-area: txt;
    }

    .fig__conclusion {
      container-type: inline-size;
      grid-area: conclusion;
      align-self: end;
      display: flex;
      flex-direction: column-reverse;
      gap: var(--gap-flex-x);
    }

    .fig__total {
      display: grid;
      place-content: center;
      padding: 0.5rem;
      background-color: var(--color-cats);
      color: #fff;
      line-height: 1.3;
    }

    .fig__period {
      --bg: #f28b2f;
      display: grid;
      place-content: center;
      width: 70%;
      aspect-ratio: 1 /1;
      position: relative;
      margin-inline: auto;
      padding: 0.75rem;
      background-color: var(--bg);
      border-radius: 100vh;
      color: #fff;
      line-height: 1.2;
      text-align: center;

      &::before {
        /* 吹き出し */
        content: "";
        width: var(--gap-flex-x);
        aspect-ratio: 1/1;
        position: absolute;
        bottom: calc(var(--gap-flex-x) * -0.8);
        left: 50%;
        translate: -50% 0;
        background-color: var(--bg);
        clip-path: polygon(0 0, 100% 0, 50% 100%);
      }

      @container (width < 157px) {
        /* 正円が崩れるタイミングで100％に */
        width: 100%;
        box-sizing: border-box;
      }
    }

    .big {
      font-size: var(--font-size-h2);
      font-weight: 700;
    }

    .small {
      display: inline-block;
      margin-top: 2px;
      font-size: 0.625rem;
      line-height: 1.1;
    }
  }

  .c-block__txt {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    ul {
      margin-left: 1.25em;
      > li {
        list-style-type: disc;
      }
    }
  }

  /* レイアウト崩れ防止のため早めに切り替える */
  @container block (width < 696px) {
    .c-block {
      row-gap: var(--my-xs);
      grid-template-columns: 1fr;
      grid-template-areas:
        "ttl"
        "fig"
        "txt";
    }

    .c-block__txt {
      row-gap: var(--my-xs);
    }
  }

  @media screen and (max-width: 479px) {
    @scope (.c-block__fig) {
      :scope {
        grid-template-columns: 1fr;
        grid-template-areas:
          "img"
          "table"
          "conclusion"
          "txt";
      }
      .fig__conclusion {
        flex-direction: row;
      }

      .fig__total {
        flex: 1;
      }

      .fig__period {
        flex: 1;

        &::before {
          bottom: 50%;
          left: calc(var(--gap-flex-x) * -0.8);
          rotate: 90deg;
          translate: 0 50%;
        }
      }
    }
  }
}

@scope (#battery_HEMS) {
  .c-block {
    gap: var(--my-small) clamp(0rem, -1.4341rem + 4.7904vw, 1.5rem); /* 0~24px */
    grid-template-columns: 1fr minmax(auto, 20%);
    grid-template-areas:
      "ttl ttl"
      "img fig"
      "txt txt";
  }

  .c-block__fig {
    display: flex;
    flex-direction: column;
    gap: clamp(0.25rem, -0.47rem + 2.4vw, 1rem); /* 480px~980px 4~16px */
    justify-self: center;
  }

  .c-block__img {
    justify-self: center;
  }

  @scope (.c-block__txt) {
    :scope {
      padding: var(--px-contents-inner);
      background-color: #f5e2dc;
    }

    .hems__heading {
      margin-inline: -0.5em;
      margin-bottom: var(--my-xs);
      font-size: var(--font-size-h4);
      font-weight: 700;
      text-align: center;
    }

    @media screen and (min-width: 480px) {
      /* PC版の可読性確保 */
      .hems__txt {
        max-width: calc(
          100% - 1.25rem * 2
        ); /*適宜読みやすい長さに調節してください*/
        margin-inline: auto;
      }
    }
  }

  /* レイアウト崩れ防止のため早めに切り替える */
  @media screen and (max-width: 576px) {
    .c-block {
      grid-template-columns: 1fr;
      grid-template-areas:
        "ttl"
        "img"
        "fig"
        "txt";
    }

    .c-block__fig {
      flex-direction: row;
    }
  }
}