@charset "UTF-8";

/* ------------------------------
  solarpower
------------------------------ */
#solarpower {padding-bottom: 150px;}
#solarpower .solarpower_block {margin-top: 140px; text-align: center;}
#solarpower .solarpower_block h3 {margin-bottom: 0.5em; font-size: 4.4rem; font-weight: 700; line-height: 1.4;}
#solarpower .solarpower_block .img {margin-top: 50px; text-align: center;}
#solarpower .solarpower_block .img figure {position: relative; display: inline-block;}
#solarpower .solarpower_block .img-example figure::before {content: "※画像はイメージです"; position: absolute; right: 0; bottom: 0; padding: 10px 20px; font-size: 1.2rem; font-weight: 400; line-height: 1; background-color: #f2f2f2;}
#solarpower .solarpower_block .img-example figure img {display: block;}
#solarpower .solarpower_block .example {position: relative; margin-top: 120px; text-align: left;}
#solarpower .solarpower_block .example::before {content: ""; position: absolute; left: 18px; top: 20px; width: 5px; height: 5px; border-radius: 50%; background-color: #4a4a4a;}
#solarpower .solarpower_block .example::after {content: "Example"; position: absolute; left: -5px; top: 52px; color: #969696; font-family: "Barlow", sans-serif; font-size: 1.4rem; font-weight: 400; transform: rotate(90deg);}
#solarpower .solarpower_block .example .inner {display: flex; justify-content: space-between; align-items: center; padding: 60px; margin-left: 40px; background-color: #f2f2f2;}
#solarpower .solarpower_block .example .inner .txt {width: calc(50% - 20px);}
#solarpower .solarpower_block .example .inner .txt h4 {margin-bottom: 0.5em; font-size: 3.6rem; font-weight: 700; line-height: 1.4;}
#solarpower .solarpower_block .example .inner .img {position: relative; width: calc(50% - 20px);}
#solarpower .solarpower_block .example .inner .img-example::before {content: "※画像はイメージです"; position: absolute; right: 0; bottom: 0; padding: 10px 20px; font-size: 1.2rem; font-weight: 400; line-height: 1; background-color: #f2f2f2;}
#solarpower .solarpower_block .example .inner .img img {display: block;}

@media (min-width: 768px) {
}
@media (max-width: 767px) {
  /* ------------------------------
    solarpower
  ------------------------------ */
  #solarpower {padding-bottom: 75px;}
  #solarpower .solarpower_block {margin-top: 70px; text-align: left;}
  #solarpower .solarpower_block h3 {font-size: 3.4rem;}
  #solarpower .solarpower_block .img {margin-top: 25px;}
  #solarpower .solarpower_block .img-example figure::before {padding: 5px 10px;}
  #solarpower .solarpower_block .example {margin-top: 60px;}
  #solarpower .solarpower_block .example::before {left: 12px;}
  #solarpower .solarpower_block .example::after {left: -11px;}
  #solarpower .solarpower_block .example .inner {display: block; padding: 20px; margin-left: 30px;}
  #solarpower .solarpower_block .example .inner .txt {width: 100%;}
  #solarpower .solarpower_block .example .inner .txt h4 {font-size: 2.4rem;}
  #solarpower .solarpower_block .example .inner .img {width: 100%; margin-top: 20px;}
  #solarpower .solarpower_block .example .inner .img-example::before {padding: 5px 10px;}
}