@charset "UTF-8";
html {
  color: #777777;
  font-family: "Helvetica","ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	
  font-size: 16px
}

@media screen and (max-width:640px) {
  html {
    font-size: 14px
  }
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100%;
  line-height: 1.75;
  -webkit-font-feature-settings: "palt" 1;
  font-feature-settings: "palt" 1;
  -webkit-text-size-adjust: 100%
}

h1, h2, h3, h4, h5, h6 {
  font-size: 20px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "游ゴシック", "MS PGothic", sans-serif;
}

li, ul {
  list-style: none;
  padding: 0
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom
}

a img {
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s
}

a img:hover {
  opacity: .7
}

a {
  text-decoration: none
}


#slider {
  height: 100vh;
  position: fixed;
  z-index: -1;
  top:0;
  right:0;
  left:0;
  bottom:0;
  object-fit: cover;
}

@media screen and (max-width: 640px){ 
  #slider {
    height: 100vh;
    position: fixed;
    z-index: -1;
    top:0;
    right:0;
    left:0;
    bottom:0;
    object-fit: cover;
  }
}

.pal {
  margin-bottom: 100vh; 
}

.pal2 {
  margin-bottom: 85vh; 
}

/*========= レイアウトのためのCSS ===============*/

a:hover,
a:active{
text-decoration: none;
}

.slideh1 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 6vw;
  letter-spacing: 0.1em;
  color: #fff;
  box-sizing: border-box;
  width: 100%;
}

.slideh1 h1 {  
  font-size: 42px;
  margin-bottom: 0.2em;
  letter-spacing: 0.1em;
}

.slideh1b {
  position: fixed;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 6vw;
  letter-spacing: 0.1em;
  color: #fff;
  box-sizing: border-box;
}

.slideh1b h1 {  
  font-size: 38px;
  margin-bottom: 30px;
  letter-spacing: 0.1em;
}

.slideh1b h2 {  
  font-size: 20px;
  margin-bottom: 0.2em;
  letter-spacing: 0.1em;
  font-weight: 400;
}

.slideh2 {
  position: absolute;
  z-index: 2;
  bottom: 100px;
  text-align: center;
  right: 0;
  font-size: 6vw;
  letter-spacing: 0.1em;
  color: #fff;
  background-attachment: fixed;
  width: auto;
  background: rgba(0, 0, 0, 0.5);
  padding: 15px 50px;
  /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); */
}

.slideh1 h2 {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "YuGothic", "游ゴシック", "MS PGothic", sans-serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.2em;
}

.slideh2 h2 {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "游ゴシック", "MS PGothic", sans-serif;
  font-size: 26px;
  font-weight: 00;
}

@media screen and (max-width: 640px) {
  .slideh1 {
    position: fixed;
    top: 50%;
    left: 50%;
    text-align: center;
    letter-spacing: 0.1em;
    color: #fff;
    background-attachment: fixed;
    width: auto;
    padding: 15px;
    padding-left: 20px;
    width: 100%;
  }

   .slideh1 h1 {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN","YuGothic", "游ゴシック", "MS PGothic", sans-serif;
    font-size: 24px;
    letter-spacing: 0.1em;
  }

  .slideh1 h2 {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN","YuGothic", "游ゴシック", "MS PGothic", sans-serif;
    font-size: 16px;
    letter-spacing: 0.1em;
  }

  .slideh1b {
    position: fixed;
    top: 65%;
    left: 50%;
    text-align: center;
    letter-spacing: 0.1em;
    color: #fff;
    background-attachment: fixed;
    width: auto;
    padding: 15px;
    padding-left: 20px;
    max-width: 100%;
  }

   .slideh1b h1 {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN","YuGothic", "游ゴシック", "MS PGothic", sans-serif;
    font-size: 24px;
    letter-spacing: 0.1em;
    font-weight: 600;
  }

  .slideh1b h2 {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN","YuGothic", "游ゴシック", "MS PGothic", sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 300;
  }


  .slideh2 {
    position: absolute;
    z-index: 2;
    bottom: 100px;
    right: 0;
    text-align: left;
    letter-spacing: 0.1em;
    /* text-transform: uppercase; */
    color: #fff;
    background-attachment: fixed;
    width: auto;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); */
  }

  .slideh2 h2 {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN",
      "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "游ゴシック", "MS PGothic", sans-serif;
    font-size: 14px;
    font-weight: 200;
  }
}




.privacy {
  background-color: #fff;
}

@media screen and (max-width:640px) {
  .privacy-p {
  word-break: break-all;
}
}

.delayed-image {
animation: fadeIn 3s ease 0s 1 normal;
-webkit-animation: fadeIn 3s ease 0s 1 normal;
}

@keyframes fadeIn {
0% {opacity: 0} /* 始め */
100% {opacity: 1} /* 終わり */
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.wrapper{
position: relative;
}

@media screen and (min-width:641px) {
  .sp-mode {
    display: none
  }
}

@media print {
  .sp-mode {
    display: none
  }
}

@media screen and (min-width:769px) {
  .tab-mode {
    display: none
  }
}

@media screen and (max-width:640px) {
  .pc-mode {
    display: none
  }
}

@media print {
  .pc-mode {
    display: block
  }
}

@media screen and (min-width:901px) {
  .nopc-mode {
    display: none
  }
}



.clearfix:after {
  content: "";
  display: table;
  clear: both
}

.cont__inner {
  width: 95%;
  margin: 0 auto
}

@media screen and (min-width:641px) {
  .cont__inner {
    max-width: 1080px
  }
}

.return-top {
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  right: -250px;
  bottom: 2%;
  z-index: 10000;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.5);
  border: solid 2px #777777;
  border-radius: 50%;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s
}

@media screen and (min-width:641px) {
  .return-top {
    bottom: 3%;
    width: 60px;
    height: 60px
  }
}

.return-top:hover {
  color: #777777;
  background: #777777;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s
}

.return-top:hover a {
  color: #fff
}

.return-top a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #777777
}

.return-top a:after {
  content: '\f077';
  font-weight: bold;
  font-family: "Font Awesome 5 Free"
}

html {
  width: 100%
}

body {
  max-width: 100%
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

::-moz-selection {
  background: #D2AC62;
  color: #fff
}

::selection {
  background: #D2AC62;
  color: #fff
}

.lazyload {
  opacity: 0
}

.is-lazyloaded {
  opacity: 1;
  -webkit-transition: opacity .8s ease-out;
  -o-transition: opacity .8s ease-out;
  transition: opacity .8s ease-out
}

.sec__inner {
  margin: 0 auto;
  width: 94%
}

.sec__ttl {
  font-size: 32px;
  font-size: 2rem;
  text-align: center;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "游ゴシック", "MS PGothic", sans-serif;
  line-height: 1.5;
}

@media screen and (max-width:640px) {
  .sec__ttl {
    font-size: 6vw
  }
}




/*----------------------------------------------------------------------*/

.sec__sttl {
  text-align: center;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "游ゴシック", "MS PGothic", sans-serif;
  font-size: 30px;
  font-size: 1.5rem;
  margin-bottom: 30px;
}

@media screen and (max-width:640px) {
  .sec__sttl {
    font-size: 4.8vw
  }
}

.sec__sttl--line {
  font-size: 30px;
  font-size: 1.5rem;
  text-align: center;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "游ゴシック", "MS PGothic", sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

@media screen and (max-width:640px) {
  .sec__sttl--line {
    font-size: 4.8vw
  }
}

.sec__sttl--line:before {
  content: '';
  display: inline-block;
  width: 70px;
  height: 1px;
  margin-right: 20px;
  background: #fff
}

@media screen and (max-width:640px) {
  .sec__sttl--line:before {
    width: 40px
  }
}

.sec__sttl--line:after {
  content: '';
  display: inline-block;
  width: 70px;
  height: 1px;
  margin-left: 20px;
  background: #fff
}

@media screen and (max-width:640px) {
  .sec__sttl--line:after {
    width: 40px
  }
}

.sec__txt--bold {
  font-weight: bold
}

.sec__txt--80per {
  font-size: .8em
}

.sec__txt--130per {
  font-size: 1.3em;
  line-height: 0
}

.sec__txt--140per {
  font-size: 1.4em
}

.sec__txt--150per {
  font-size: 1.5em;
  line-height: 0
}

.sec__txt--200per {
  font-size: 2.0em;
  line-height: 0
}

.hdr {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%
}

.hdr__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between
}

@media screen and (max-width:768px) {
  .hdr__inner {
    width: 94%
  }
}

.hdr__logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media screen and (max-width:768px) {
  .hdr__logo {
    width: 70%;
    max-width: 230px
  }
}

.hdr__list {
  width: 596px;
  margin-left: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

@media screen and (max-width:768px) {
  #slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
}

@media screen and (max-width:768px) {
  .hdr__list {
    width: 30%;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
  }
}

.hdr__item:nth-of-type(2) {
  width: calc(100% - 239px - 20px)
}

@media screen and (max-width:768px) {
  .hdr__item:nth-of-type(2) {
    width: auto;
    margin-left: 20px
  }
}

.hdr__item a {
  color: #012D5B;
  display: block;
  text-align: center
}

.hdr-item__tel {
  font-size: 32px;
  font-size: 1.6rem;
  font-family: 'Roboto', sans-serif;
  font-style: italic;
  font-weight: bold;
  line-height: 1.25
}

.hdr-item__tel--pc {
  position: relative;
  display: inline-block
}

@media screen and (max-width:768px) {
  .hdr-item__tel--pc {
    display: none
  }
}

.hdr-item__tel--pc:before {
  content: '';
  background: url("../images/tel-blu.png") no-repeat;
  background-size: contain;
  width: 30px;
  height: 19px;
  display: inline-block;
  vertical-align: baseline;
  margin-right: 10px
}

.hdr-item__tel--sp {
  display: none
}

@media screen and (max-width:768px) {
  .hdr-item__tel--sp {
    display: inline-block
  }
}

.hdr-item__tel--note {
  font-size: 12px;
  font-size: 0.6rem;
  display: block;
  font-family: "Helvetica","ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	
  font-style: normal;
  font-weight: normal;
  line-height: 1.25
}

.hdr-item__mail {
  font-size: 18px;
  font-size: 0.9rem;
  font-weight: bold;
  width: 100%;
  height: 60px;
  line-height: 60px;
  border: solid 1px #556f9c;
  border-radius: 5px;
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out
}

@media screen and (max-width:768px) {
  .hdr-item__mail {
    font-size: 28px;
    font-size: 1.4rem;
    border: none
  }
}

.hdr-item__mail:hover {
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  background: #556f9c;
  color: #fff
}

@media screen and (max-width:768px) {
  .hdr-item__mail:hover {
    background: none;
    color: #556f9c
  }
}

.hdr-item__mail--pc {
  display: inline-block
}

@media screen and (max-width:768px) {
  .hdr-item__mail--pc {
    display: none
  }
}

.hdr-item__mail--sp {
  display: none
}

@media screen and (max-width:768px) {
  .hdr-item__mail--sp {
    display: inline-block
  }
}



.cta {
  background-color: #3e95b9;
  font-family: "NotoSansJP","Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "游ゴシック", "MS PGothic", sans-serif;
}

@media screen and (max-width:900px) {
  .cta {
    background-color: #3e95b9;
  }
}

.cta__ttl {
  text-align: center;
  font-weight: 300;
}

.cta__sttl {
  text-align: center;
  font-weight: 300;
}

.sec__sttl--line {
  font-size: 30px;
  font-size: 1.5rem;
  text-align: center;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "游ゴシック", "MS PGothic", sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 300;
  
}

/* ========================
   記事スライダーセクション
=========================== */

/* タイトル部分 */
.article-slider-header {
  text-align: center;
}

.article-slider-title {
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 50px;
  line-height: 1.4;
}

.article-slider-title span {
  display: block;
  font-size: 1.25rem;
  color: #666;
  margin-top: 0.5rem;
}

.article-slider-lead {
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: #4ca88c;
  line-height: 1.5;
}

/* レスポンシブ調整 */
@media screen and (max-width: 768px) {
  .article-slider-title {
    font-size: 1.5rem;
  }

  .article-slider-title span {
    font-size: 1rem;
  }

  .article-slider-lead {
    font-size: 22px;
    line-height: 1.5;
  }
}


.article-slider-section {
  padding: 100px 0;
  background-color: #ffffff;
  overflow: hidden;
  position: relative;
}

.article-swiper {
  overflow: hidden;
}

.article-card {
  display: flex;
  flex-direction: column;
  background: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 16px;
  height: 100%;
  box-sizing: border-box;
}

.article-card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
}

.article-date {
  font-size: 0.85em;
  color: #888;
  margin-bottom: 4px;
}

.article-title {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 8px;
}

.article-description {
  font-size: 0.95em;
  color: #444;
  flex-grow: 1;
  min-height: 3em; /* 2行分の高さで統一（行間含めて調整） */
  line-height: 1.5;
  overflow: hidden;
}

.swiper-slide {
  display: flex;
  height: auto;
}

.article-link-container {
  text-align: right;
  margin-top: 12px;
}

.article-link {
  display: inline-block;
  color: #007bff;
  font-size: 0.95em;
  text-decoration: none;
  transition: color 0.3s ease;
}

.article-link:hover {
  color: #0056b3;
  text-decoration: underline;
}


/* ========================
   intoroセクション
=========================== */

.intro-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.intro-image-wrapper {
  position: relative;
  width: 100%;
  height: 800px;
  overflow: hidden;
}

.intro-image {
  width: 100%;
  height: 150%; /* ← 高さを拡張（必要に応じて調整） */
  background-size: cover;
  background-position: center bottom;
  position: absolute;
  top: -25%; /* パララックスの余白として適切な位置に調整 */
  left: 0;
  transform: translateY(0);
  transition: transform 0.05s linear;
}

.intro-text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  max-width: 900px;
  padding: 40px;
  color: #fff;
  text-align: center;
  border-radius: 12px;
}

.intro-heading-large {
  font-size: 36px;
  line-height: 1.4;
  margin-bottom: 1em;
}

.intro-heading-small {
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 1em;
  color: #ccc;
}

.intro-lead {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 1em;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .intro-image-wrapper {
    height: 420px;
  }

  .intro-text-overlay {
    padding: 20px;
  }

  .intro-heading-large {
    font-size: 1.5em;
  }

  .intro-heading-small {
    font-size: 1em;
  }

  .intro-lead {
    font-size: 1em;
  }
}


/* ========================
   カスタムパララックスセクション
=========================== */

.custom-parallax-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 100px 10%;
  min-height: 100vh;
  gap: 40px;
  background-color: rgba(248, 248, 248, 1); /* ← 背景色も半透明に調整可能 */
  overflow: hidden;
  z-index: 0;
}

.custom-parallax-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/solar_web_kv_pc_1920_1080_14.jpg);
  background-size: cover;
  background-position: center;
  opacity: 0.2; /* ← ここで画像の透明度を調整 */
  z-index: -1;
}

.custom-parallax-section.reverse {
  flex-direction: row-reverse;
}

.custom-parallax-image-wrapper {
  flex: 1;
  min-width: 300px;
  height: 800px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  position: relative;
}

.custom-parallax-image {
  width: 100%;
  height: 150%;
  background-size: cover;
  background-position: center center;
  transform: translateY(0);
  transition: transform 0.05s linear;
  position: absolute;
  top: -25%;
  left: 0;
}

.custom-parallax-text {
  flex: 1;
  max-width: 800px;
  min-width: 300px;
  position: relative;
  z-index: 2;
  margin-left: -200px; /* 左から少し重ねる（画像が右側のとき） */
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  padding: 90px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: margin 0.3s ease;
}

.custom-parallax-section.reverse .custom-parallax-text {
  margin-left: 0;
  margin-right: -200px; /* 画像が左のときは右に重ねる */
}

.custom-heading-large {
  font-size: 40px;
  margin-bottom: 0.2em;
}

.custom-heading-small {
  display: flex;
  align-items: center;
  gap: 10px; /* テキストと線の間隔 */
  font-size: 16px;
  font-weight: normal;
  color: #888;
  margin-bottom: 1em;
  position: relative;
}

.custom-heading-small::after {
  content: "";
  flex: 1;
  height: .5px;
  background-color: #555;
}

.custom-lead {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.custom-view-more {
  margin-top: 2em;
  text-align: center;
  font-size: 0.95em;
  font-weight: bold;
  border: solid 1px;
  width: 150px;
  padding: 10px;
  border-radius: 25px;
}

.custom-view-more a {
  text-decoration: none;
  transition: all 0.3s ease;
}

.custom-view-more a:hover {
  text-decoration: underline;
  color: #4ca88c;
}


.custom-view-more_w {
  margin-top: 2em;
  text-align: center;
  font-size: 0.95em;
  font-weight: bold;
  border: solid 1px;
  width: 150px;
  padding: 10px;
  border-radius: 25px;
  color: #ffffff;
}

.custom-view-more_w a {
  text-decoration: none;
  transition: all 0.3s ease;
  color: #ffffff;
}

.custom-view-more_w a:hover {
  text-decoration: underline;
  color: #4ca88c;
}

@media (max-width: 768px) {
  .custom-parallax-image {
    height: 120%;
    top: -10%;
  }

  .custom-parallax-section {
    flex-direction: column;
    padding: 40px 16px;
    gap: 40px;
  }

  .custom-parallax-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* スクエアにする */
    height: auto; /* 高さは aspect-ratio に従う */
    border-radius: 12px;
  }

  .custom-parallax-text {
    width: 100%;
    margin: 0 !important;
    padding: 24px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: none;
    box-shadow: none;
  }

  .custom-heading-large {
    font-size: 2em;
    margin-bottom: 0.3em;
  }

  .custom-heading-small {
    font-size: 1em;
    margin-bottom: 1em;
  }

  .custom-lead {
    font-size: 1em;
    margin-bottom: 0.5em;
  }
}

/* ----------------------------------
  purpose-section
---------------------------------- */
.purpose-parallax-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 100px 10%;
  min-height: 100vh;
  gap: 40px;
  background-color: rgba(184, 225, 221, 1); /* 元の #b8e1dd を半透明に */
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.purpose-parallax-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/solar_web_kv_pc_1920_1080_02.jpg);
  background-size: cover;
  background-position: center;
  opacity: 0.2; /* 透明度の調整 */
  z-index: -1;
}

.purpose-parallax-section.reverse {
  flex-direction: row-reverse;
}

.purpose-parallax-image-wrapper {
  flex: 1;
  min-width: 300px;
  height: 800px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  position: relative;
}

.purpose-parallax-image {
  width: 100%;
  height: 150%;
  background-size: cover;
  background-position: center center;
  transform: translateY(0);
  transition: transform 0.05s linear;
  position: absolute;
  top: -25%;
  left: 0;
}

.purpose-parallax-text {
  flex: 1;
  max-width: 800px;
  min-width: 300px;
  position: relative;
  z-index: 2;
  margin-left: -200px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  padding: 90px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: margin 0.3s ease;
}

.purpose-parallax-section.reverse .purpose-parallax-text {
  margin-left: 0;
  margin-right: -200px;
}

.purpose-heading-large {
  font-size: 40px;
  margin-bottom: 0.2em;
}

.purpose-heading-small {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: normal;
  color: #888;
  margin-bottom: 1em;
  position: relative;
}

.purpose-heading-small::after {
  content: "";
  flex: 1;
  height: 0.5px;
  background-color: #555;
}

.purpose-lead {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.purpose-view-more {
  margin-top: 2em;
  text-align: center;
  font-size: 0.95em;
  font-weight: bold;
  border: solid 1px;
  width: 150px;
  padding: 10px;
  border-radius: 25px;
}

.purpose-view-more a {
  text-decoration: none;
  transition: all 0.3s ease;
}

.purpose-view-more a:hover {
  text-decoration: underline;
  color: #4ca88c;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .purpose-parallax-section {
    flex-direction: column;
    padding: 40px 16px;
    gap: 40px;
  }

  .purpose-parallax-image {
    height: 120%;
    top: -10%;
  }

  .purpose-parallax-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 12px;
  }

  .purpose-parallax-text {
    width: 100%;
    margin: 0 !important;
    padding: 24px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: none;
    box-shadow: none;
  }

  .purpose-heading-large {
    font-size: 2em;
    margin-bottom: 0.3em;
  }

  .purpose-heading-small {
    font-size: 1em;
    margin-bottom: 1em;
  }

  .purpose-lead {
    font-size: 1em;
    margin-bottom: 0.5em;
  }
}


/* ----------------------------------
  effort-section
---------------------------------- */

.effort-parallax-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 260px 10%;
  min-height: 100vh;
  gap: 40px;
  background-color: rgba(248, 248, 248, 1); /* 半透明の背景色 */
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.effort-parallax-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/kawagoe_tokinokane.jpg);
  background-size: cover;
  background-position: center;
  opacity: 0.2; /* 画像の透明度 */
  z-index: -1;
}

.effort-parallax-section.reverse {
  flex-direction: row-reverse;
}

.effort-parallax-image-wrapper {
  flex: 1;
  min-width: 300px;
  height: 800px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  position: relative;
}

.effort-parallax-image {
  width: 100%;
  height: 150%;
  background-size: cover;
  background-position: center center;
  transform: translateY(0);
  transition: transform 0.05s linear;
  position: absolute;
  top: -25%;
  left: 0;
}

.effort-parallax-text {
  flex: 1;
  max-width: 800px;
  min-width: 300px;
  position: relative;
  z-index: 2;
  margin-left: -200px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  padding: 90px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: margin 0.3s ease;
}

.effort-parallax-section.reverse .effort-parallax-text {
  margin-left: 0;
  margin-right: -200px;
}

.effort-heading-large {
  font-size: 40px;
  margin-bottom: 0.2em;
}

.effort-heading-small {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: normal;
  color: #888;
  margin-bottom: 1em;
  position: relative;
}

.effort-heading-small::after {
  content: "";
  flex: 1;
  height: .5px;
  background-color: #555;
}

.effort-lead {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.effort-view-more {
  margin-top: 2em;
  text-align: center;
  font-size: 0.95em;
  font-weight: bold;
  border: solid 1px;
  width: 150px;
  padding: 10px;
  border-radius: 25px;
}

.effort-view-more a {
  text-decoration: none;
  transition: all 0.3s ease;
}

.effort-view-more a:hover {
  text-decoration: underline;
  color: #4ca88c;
}

@media (max-width: 768px) {
  .effort-parallax-image {
    height: 120%;
    top: -10%;
  }

  .effort-parallax-section {
    flex-direction: column;
    padding: 40px 16px;
    gap: 40px;
  }

  .effort-parallax-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 12px;
  }

  .effort-parallax-text {
    width: 100%;
    margin: 0 !important;
    padding: 24px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: none;
    box-shadow: none;
  }

  .effort-heading-large {
    font-size: 2em;
    margin-bottom: 0.3em;
  }

  .effort-heading-small {
    font-size: 1em;
    margin-bottom: 1em;
  }

  .effort-lead {
    font-size: 1em;
    margin-bottom: 0.5em;
  }
}

/*purposeページのeffort*/
.effort-section {
  width: 100%;
  margin-top: 80px;
}

.effort-heading {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 24px;
  color: #777;
  border-left: 4px solid #4ca88c;
  padding-left: 12px;
}

.effort-heading span {
  display: block;
  font-size: 20px;
  font-weight: normal;
  color: #888;
  margin-top: 4px;
}

.effort-items {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.effort-item {
  width: calc(20% - 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 14px;
  color: #555;
}

.effort-image-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.effort-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

@media (max-width: 768px) {
  .effort-item {
    width: calc(25% - 18px);
  }
}

@media (max-width: 768px) {
  .effort-item {
    width: calc(50% - 12px);
  }

  .effort-item p {
    font-size: 12px;
    text-align: center;
  }
}


.sdgs-section {
  width: 100%;
  margin-top: 80px;
  padding: 110px 2rem;
}

.sdgs-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.sdgs-heading {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 24px;
  color: #777;
  border-left: 4px solid #4ca88c;
  padding-left: 12px;
}

.sdgs-heading span {
  display: block;
  font-size: 20px;
  font-weight: normal;
  color: #888;
  margin-top: 4px;
}

.sdgs-items {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.sdgs-item {
  width: calc(25% - 18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 14px;
  color: #555;
}

.sdgs-image-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sdgs-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

@media (max-width: 1024px) {
  .sdgs-item {
    width: calc(33.33% - 16px);
  }
}

@media (max-width: 768px) {
  .sdgs-item {
    width: calc(50% - 12px);
  }

  .sdgs-item p {
    font-size: 12px;
    text-align: center;
  }
}



/* ----------------------------------
  affiliation-section
---------------------------------- */
.affiliation-section {
  width: 100%;
  margin-top: 80px;
}

.affiliation-heading {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 24px;
  color: #333;
  border-left: 4px solid #4ca88c;
  padding-left: 12px;
}

.affiliation-heading span {
  display: block;
  font-size: 14px;
  font-weight: normal;
  color: #888;
  margin-top: 4px;
}

.affiliation-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.affiliation-item {
  width: calc(25% - 18px); /* 4列（24px gap対応） */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 14px;
  color: #555;
}

.affiliation-item .logo-wrapper {
  width: 100%;
  aspect-ratio: 4 / 3; /* 横長の枠 */
  max-height: 150px;
  background-color: #fff;
  border-radius: 6px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 8px;
}

.affiliation-item .logo-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* モバイル対応 */
@media (max-width: 1024px) {
  .affiliation-item {
    width: calc(33.333% - 16px); /* 3列 */
  }
}

@media (max-width: 768px) {
  .affiliation-item {
    width: calc(50% - 12px); /* 2列 */
  }
  .affiliation-item p {
    font-size: 10px;
    text-align: left;
  }
  
}


/* ----------------------------------
   Service section
---------------------------------- */

.service__section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 100px 10%;
  min-height: 100vh;
  gap: 40px;
  background-color: rgba(217, 239, 249, 1); /* 元の #d9eff9 を半透明に */
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.service__section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/solar_web_kv_pc_1920_1080_05.jpg);
  background-size: cover;
  background-position: center;
  opacity: 0.2; /* 画像の透明度 */
  z-index: -1;
}


.service__section.reverse {
  flex-direction: row-reverse;
}

.service__image-wrapper {
  flex: 1;
  min-width: 300px;
  height: 800px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  position: relative;
}

.service__image {
  width: 100%;
  height: 150%;
  background-size: cover;
  background-position: center center;
  transform: translateY(0);
  transition: transform 0.05s linear;
  position: absolute;
  top: -25%;
  left: 0;
}

.service__text {
  flex: 1;
  max-width: 800px;
  min-width: 300px;
  position: relative;
  z-index: 2;
  margin-left: -200px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  padding: 90px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: margin 0.3s ease;
}

.service__section.reverse .service__text {
  margin-left: 0;
  margin-right: -200px;
}

.service__heading-large {
  font-size: 40px;
  margin-bottom: 0.2em;
}

.service__heading-small {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: normal;
  color: #888;
  margin-bottom: 1em;
  position: relative;
}

.service__heading-small::after {
  content: "";
  flex: 1;
  height: .5px;
  background-color: #555;
}

.service__lead {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.service__view-more {
  margin-top: 2em;
  text-align: center;
  font-size: 0.95em;
  font-weight: bold;
  border: solid 1px;
  width: 150px;
  padding: 10px;
  border-radius: 25px;
}

.service__view-more a {
  text-decoration: none;
  transition: all 0.3s ease;
}

.service__view-more a:hover {
  text-decoration: underline;
  color: #4ca88c;
}

@media (max-width: 768px) {
  .service__image {
    height: 120%;
    top: -10%;
  }

  .service__section {
    flex-direction: column;
    padding: 40px 16px;
    gap: 40px;
  }

  .service__image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 12px;
  }

  .service__text {
    width: 100%;
    margin: 0 !important;
    padding: 24px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: none;
    box-shadow: none;
  }

  .service__heading-large {
    font-size: 2em;
    margin-bottom: 0.3em;
  }

  .service__heading-small {
    font-size: 1em;
    margin-bottom: 1em;
  }

  .service__lead {
    font-size: 1em;
    margin-bottom: 0.5em;
  }
}

/* ----------------------------------
  service-feature section
---------------------------------- */

.service-feature__intro {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 60px;
}

.service-feature__heading {
  font-size: 2.2em;
  color: #005b94;
  margin-bottom: 20px;
  line-height: 1.4;
}

.service-feature__lead {
  font-size: 1.1em;
  color: #444;
  line-height: 1.8;
  max-width: 900px;
  margin: 0 auto;
}

.service-feature__section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
  gap: 40px;
  padding: 80px 10%;
  background-color: #d9eff9;
  background-image: url(../images/smarthouse_01_w.jpg);
  background-size: cover;           /* 要素全体を覆う */
  background-position: center;      /* 中央に配置 */
  background-repeat: no-repeat;     /* 繰り返さない */
  width: 100%;
  height: auto; 
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.service-feature__intro {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 60px;
}

.service-feature__heading {
  font-size: 40px;
  color: #2a2929;
  margin-bottom: 20px;
  line-height: 1.4;
}

.service-feature__lead {
  font-size: 1.1em;
  color: #444;
  line-height: 1.8;
  max-width: 900px;
  margin: 0 auto;
}

.service-feature__item {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .service-feature__section {
    grid-template-columns: 1fr; /* 縦1列にする */
    padding: 60px 5%;           /* スマホ向けに余白を少し縮める（任意） */
  }
}

.service-feature__item:hover {
  transform: translateY(-4px);
}

.service-feature__image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.service-feature__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
}

.service-feature__title {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 0.5em;
  color: #005b94;
  min-height: 3em;
  display: flex;
  align-items: center;
}

.service-feature__lead {
  font-weight: bold;
  font-size: 1.1em;
  color: #333;
  margin-bottom: 0.8em;
  min-height: 3em;
  display: flex;
  align-items: center;
}

.service-feature__desc {
  font-size: 0.95em;
  color: #444;
  line-height: 1.6;
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
}


/* ----------------------------------
  ceo-message section
---------------------------------- */


.ceo-message {
  background-color: #fff;
  padding: 4rem 2rem;
  color: #333;
}

.ceo-message__container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.ceo-message__image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  margin-bottom: 60px;
}

.ceo-message__content {
  text-align: left;
}

.ceo-message__title {
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.ceo-message__title span {
  display: block;
  font-size: 1.25rem;
  color: #666;
}

.ceo-message__lead {
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #4ca88c;
}

.ceo-message__sublead {
  font-style: italic;
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #444;
}

.ceo-message__body p {
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.ceo-message__body strong {
  font-weight: bold;
}

.ceo-message__footer {
  margin-top: 3rem;
  font-size: 1rem;
  text-align: right;
}

.ceo-company__name {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-size: 18px;
  line-height: 1.6;
}

.ceo-message__name {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-size: 26px;
  line-height: 1.6;
}

@media screen and (max-width: 768px) {
  .ceo-message__title {
    font-size: 1.5rem;
  }

  .ceo-message__title span {
    font-size: 1rem;
  }

  .ceo-message__lead {
    font-size: 22px;
    line-height: 1.5;
  }

  .ceo-message__sublead {
    font-size: 1rem;
  }

  .ceo-message__body p {
    font-size: 0.95rem;
  }

  .ceo-message__footer {
    font-size: 0.9rem;
  }

  .ceo-company__name {
    font-size: 16px;
  }

  .ceo-message__name {
    font-size: 22px;
  }
}


/* ----------------------------------
  purpose-message section
---------------------------------- */

.purpose-message {
  background-color: #f4f9f7;
  padding: 110px 2rem;
  color: #333;
}

.purpose-message__container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.purpose-message__visual {
  position: relative;
}

.purpose-message__visual img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

.purpose-message__catchcopy {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  background: rgba(255, 255, 255, 0.85);
  padding: 1.5rem;
  border-radius: 10px;
  max-width: 90%;
}

.purpose-message__catchcopy h2 {
  font-size: 2.4rem;
  color: #4ca88c;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.purpose-message__catchcopy span {
  display: block;
  font-size: 1.2rem;
  color: #555;
}

.purpose-message__catchcopy p {
  font-size: 1rem;
  font-style: italic;
  color: #888;
}

.purpose-message__leadblock {
  text-align: center;
}

.purpose-message__leadtext {
  font-size: 42px;
  font-weight: bold;
  color: #4ca88c;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.purpose-message__subtitle {
  text-align: center;
  font-size: 1.8rem;
  color: #4ca88c;
  margin-bottom: 2rem;
}

.purpose-message__intro {
  color: #444;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .purpose-message__catchcopy h2 {
    font-size: 1.6rem;
  }

  .purpose-message__leadtext {
    font-size: 1.4rem;
  }

  .purpose-message__subtitle {
    font-size: 18px;
  }
}

.purpose-message__cards {
  margin-top: 4rem;
}



.purpose-message__cardlist {
  display: flex;
  flex-direction: column;
  gap: 200px;
}

@media screen and (max-width: 768px) {
  .purpose-message__cardlist {
    gap: 50px;
  }
}

.purpose-message__card {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.purpose-message__card:nth-child(even) {
  flex-direction: row-reverse;
}


.card__image {
  flex: 1;
  position: relative;
  min-width: 40%;
  z-index: 1;
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.card__text {
  flex: 1;
  padding: 2rem;
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  z-index: 2;
  margin-left: -200px; 
}

.purpose-message__card:nth-child(even) .card__text {
  margin-left: 0;
  margin-right: -200px;
}

.card__text h4 {
  font-size: 24px;
  line-height: 1.8;
  color: #777;
  margin: 0;
}

@media screen and (max-width: 768px) {
  .purpose-message__card {
    flex-direction: column !important;
  }

  .purpose-message__card:nth-child(even) {
    flex-direction: column !important;
  }

  .card__text {
    margin: 0 !important;
    padding: 1.5rem;
    border-radius: 0;
  }

  .purpose-message__card:nth-child(even) .card__text {
    margin: 0 !important;
  }

  .card__image,
  .card__text {
    width: 100%;
  }

  .card__text h4 {
  font-size: 18px;
  line-height: 1.8;
  color: #777;
  margin: 0;
}
}

/* PC用：画像を少し大きめに */
@media screen and (min-width: 769px) {
  .card__image {
    flex: 2;
  }

  .card__text {
    flex: 1;
  }

  .card__image img {
    border-radius: 16px; /* お好みで数値を調整 */
  }
}



.section-hero {
  margin: 0;
  padding: 0;
}

.hero-image {
  position: relative;
  width: 100%;
  overflow: hidden;
}



.hero-image {
  position: relative;
  overflow: hidden;
}

.hero-image-wrapper {
  position: relative;
}

.hero-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 30% 黒で暗くする */
  z-index: 1;
}

.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: white;
  text-align: center;
  padding: 20px;
  width: 100%;
}

.hero-title {
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 10px;
}

.hero-subtitle {
  font-size: 20px;
  margin-bottom: 10px;
}

.hero-lead {
  font-size: 22px;
  line-height: 1.6;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 26px;
  }

  .hero-subtitle {
    font-size: 14px;
  }

  .hero-lead {
    font-size: 16px;
  }

  .hero-text {
    padding: 10px;
  }
}




/*沿革*/

.history__inner {
  width: 1200px;
}

.year__box {
  width: 300px;
  display: block;
  align-items: center;
  padding-left: 80px;
  align-items: left;
}

.year {
  font-size: 40px;
  font-weight: bold;
  color: #777;
}

.year_j {
  font-size: 20px;
  margin: 0 auto;
  margin-top: -20px;
  margin-bottom: 15px;
  color: #777;
}

.history_dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.history_dl dt {
  text-align: right;
  width: 8.5em;
  padding: 0.5em 1.0em 0.5em 0.5em;
  position: relative;
}

.history_dl dt::after {
  content: '●';
  position: absolute;
  right: -0.33em;
  top: -2px;
  font-size: 22px;
  color: #4ca88c;
}

.history_dl dd {
  width: calc(100% - 8.5em);
  padding: 5px 2.0em;
  border-left: 2px solid #ccc;
}

.history_dl dd h2 {
  font-size: 22px;
  font-weight: bold;
  margin: 0 0 5px;
}

@media screen and (max-width:640px) {
  .year__box {
    width: 300px;
    display: block;
    align-items: center;
    padding-left: 100px;
  }
  
  .history_dl dd p {
    font-size: 12px;
  }
}


.es_group {
  background-color: #F7FDFF;
  width: 100%;
  padding: 100px 0;
  margin: 0 auto;
}

/* ----------------------------------
   column Page
---------------------------------- */

.column-article {
  padding: 4rem 2rem;
  background: #fff;
  color: #333;
  font-family: sans-serif;
}

.column-article__container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* 日付とカテゴリラベル */
.column-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  font-size: 0.95rem;
  color: #666;
  margin-bottom: -1.5rem;
}
.column-article__date {
  font-weight: bold;
}
.column-article__labels {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.column-article__label {
  background-color: #4ca88c;
  color: #fff;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

/* Header */
.column-article__title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
.column-article__title span {
  display: block;
  font-size: 1.2rem;
  color: #666;
}
.column-article__lead {
  font-size: 1.4rem;
  margin-bottom: 2rem;
  color: #4ca88c;
}

/* Body */
.column-article__body {
  font-size: 1rem;
  line-height: 1.8;
}
.column-article__body p {
  margin-bottom: 1.5rem;
}

.column-article__body ul{
  padding-bottom: 25px;
}

/* 小見出し（本文中用） */
.column-article__subheading {
  position: relative;
  font-size: 24px;
  font-weight: bold;
  color: #4ca88c; /* リード文と同じ色 */
  margin: 2.5rem 0 1.5rem 0;
  padding-left: 1rem;
  line-height: 1.4;
  border-left: 4px solid #4ca88c; /* 左の縦棒 */
}

@media screen and (max-width: 767px) {
  .column-article__subheading {
    font-size: 18px;
  }
}

/* Image + Text Block */
.column-article__media-block {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}
.column-article__image {
  flex: 1;
}
.column-article__image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.column-article__text {
  flex: 1;
}
.column-article__text p {
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* Table */
.column-article__table-wrapper {
  overflow-x: auto;
}
.column-article__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
.column-article__table th,
.column-article__table td {
  border: 1px solid #ccc;
  padding: 0.75rem;
  text-align: left;
  background: #f9f9f9;
}
.column-article__table th {
  background: #e0e0e0;
}

/* CTA */
.column-article__cta {
  padding: 2rem;
  background: #f3f9f7;
  border-left: 6px solid #4ca88c;
  border-radius: 8px;
}
.column-article__cta-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  text-align: center;
}
.column-article__cta-list {
  margin: 1rem 0;
  padding-left: 1.2rem;
  list-style: disc;
}
.column-article__cta-button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: #4ca88c;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
}

/* 画像とテキストの横並び対応 */
.column-article__cta-flex {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

/* 画像トリミングとサイズ */
.column-article__cta-image img {
  width: 255px;
  height: 250px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* テキスト部分 */
.column-article__cta-text {
  flex: 1;
  min-width: 200px;
}

.column-article__cta-list {
  margin: 1rem 0;
  padding-left: 0;
  list-style: none;
}

.column-article__cta-list li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

.column-article__cta-list li i {
  color: #4ca88c;
  margin-right: 0.5rem;
  font-size: 1rem;
}

/* レスポンシブ対応 */
@media screen and (max-width: 767px) {
  .column-article__cta-flex {
    flex-direction: column;
    align-items: flex-start;
  }

  .column-article__cta-image {
    margin-bottom: 1rem;
  }

  .column-article__cta-title {
    font-size: 1.2rem;
  }

  .column-article__cta-button {
    display: block;
    width: 100%;
    text-align: center;
  }
}


/* ページネーション */
.column-article__pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #ddd;
}
.column-article__pagination a {
  color: #4ca88c;
  font-weight: bold;
  text-decoration: none;
}
.column-article__pagination a:hover {
  text-decoration: underline;
}

/* 中央配置の画像＋テキストレイアウト */
.column-article__visual-block {
  margin: 3rem 0;
}

.column-article__visual-image img {
  max-width: 100%;
  width: 800px;
  height: auto;
  border-radius: 8px;
  margin: 0 auto;
  display: block;
}

.column-article__visual-text {
  text-align: left;
  margin-top: 2rem;
  font-size: 1rem;
  line-height: 1.8;
  margin-left: auto;
  margin-right: auto;
}

.column-article__visual-text ul {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
  list-style: disc;
}




/* =======================
   Responsive
========================== */
@media screen and (max-width: 767px) {
  .column-article__title {
    font-size: 1.8rem;
  }

  .column-article__title span {
    font-size: 1rem;
  }

  .column-article__lead {
    font-size: 1.1rem;
  }

  .column-article__body {
    font-size: 0.95rem;
  }

  .column-article__media-block {
    flex-direction: column;
  }

  .column-article__text p {
    font-size: 0.95rem;
  }

  .column-article__table {
    font-size: 0.9rem;
  }

  .column-article__cta-title {
    font-size: 1.2rem;
  }

  .column-article__cta-button {
    display: block;
    width: 100%;
    text-align: center;
  }

  .column-article__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .column-article__pagination {
    flex-direction: column;
    gap: 0.8rem;
    text-align: center;
  }

  .column-article__visual-image img {
    width: 100%;
  }
  .column-article__visual-text {
    font-size: 0.95rem;
  }
}



/* ----------------------------------
   Colorize Animation
---------------------------------- */

.colorize {
  filter: grayscale(100%);
  transition: filter 3s ease-in-out, opacity 1s ease-in-out;
  opacity: 0;
}

.colorize.is-colorized {
  filter: grayscale(0%);
  opacity: 1;
}


/* ---------- ecp（energy consult plus） ---------- */

.ecp-section {
  background-color: #f5f7ef;
  padding: 64px 24px;
  color: #4ba288;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.ecp-container {
  width: 1100px;
  margin: 0 auto;
}

.ecp-title {
  font-size: 28px;
  font-weight: 600;
  border-bottom: 2px solid #4ba288;
  padding-bottom: 12px;
  margin-bottom: 32px;
  text-align: center;
  color: #4ba288;
}

.ecp-card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 0;
  margin: 0 0 40px 0;
  list-style: none;
  justify-content: center;
}

.ecp-card {
  font-size: 15px;
  background: #fff;
  border: 1px solid #4ba288;
  border-radius: 6px;
  padding: 20px 12px;
  width: 300px;
  box-sizing: border-box;
  text-align: center;
  color: #333;
  box-shadow: 0 0 8px rgba(75, 162, 136, 0.15);
  transition: box-shadow 0.3s ease;
}

.ecp-card:hover {
  box-shadow: 0 6px 12px rgb(0 0 0 / 0.15);
}

.ecp-card-icon {
  font-size: 32px;
  color: #4ba288;
  margin-bottom: 12px;
}

.ecp-card-text {
  flex-grow: 1;
}

.ecp-lead {
  font-size: 28px;
  color: #4ba288;
  line-height: 1.6;
  margin-bottom: 64px;
  text-align: center;
  font-weight: 600;
}

/* スマホ（〜480px）用 */
@media (max-width: 480px) {
  .ecp-card {
    width: 45%;
    padding: 16px 10px;
    font-size: 14px;
  }
}

/* スマホ（〜320px）用 */
@media (max-width: 320px) {
  .ecp-card {
    width: 100%;
  }
}

/* スマホ（〜767px）用 */
@media (max-width: 767px) {
  .ecp-section {
    padding: 40px 16px;
  }

  .ecp-title {
    font-size: 22px;
    margin-bottom: 24px;
  }

  .ecp-card {
    width: 90%;
    max-width: 400px;
  }

  .ecp-lead {
    font-size: 15px;
  }
}





/* ----------------------------------
  consult-guide__section
---------------------------------- */

.consult-guide__section {
  background-color: #f9f9f9;
  padding: 64px 24px;
  overflow: hidden;
  position: relative;
  padding-bottom: 110px;
}

.consult-guide__container {
  width: 1100px;
  margin: 0 auto;
  color: #4ba288;
}

.consult-guide__title {
  color: #4ba288;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 32px;
  border-bottom: 2px solid #4ba288;
  padding-bottom: 12px;
}

.consult-guide__list {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  padding-left: 1.4em;
  margin-bottom: 40px;
}

.consult-guide__text {
  font-size: 16px;
  color: #333;
  margin-bottom: 40px;
}

.consult-guide__center-text {
  font-size: 16px;
  color: #333;
  margin-bottom: 40px;
  text-align: center;
}

.consult-guide__subtitle {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #4ba288;
  border-left: 4px solid #4ba288;
  margin-top: 50px;
  padding-left: 12px;
}

.consult-guide__text {
  font-size: 16px;
  color: #333;
  margin-bottom: 16px;
}

.consult-guide__flex {
  display: flex;
  align-items: flex-start;
  gap: 40px; /* PCで余白を広く */
}

.consult-guide__image {
  width: 480px; /* PCで大きめ */
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

.consult-guide__list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 40px;
}

.consult-guide__list li {
  color: #ffffff;
  margin-bottom:15px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #4ba288;
  padding: 6px;
  border-radius: 8px;
}

.consult-guide__list i {
  color: #ffffff;
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* スマホ用 */
@media (max-width: 767px) {
  .consult-guide__flex {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .consult-guide__image {
    width: 100%;
    max-width: 320px;
    margin-bottom: 16px;
  }
}


/* ==== スマホ（〜767px）用のスタイル ==== */
@media (max-width: 767px) {
  .consult-guide__section {
    padding: 40px 16px;
  }

  .consult-guide__container {
    max-width: 100%;
  }

  .consult-guide__title {
    font-size: 22px;
    margin-bottom: 24px;
    padding-bottom: 6px;
  }

  .consult-guide__list {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 32px;
  }

  .consult-guide__text,
  .consult-guide__center-text {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .consult-guide__subtitle {
    font-size: 17px;
    margin-top: 40px;
    margin-bottom: 12px;
    padding-left: 10px;
  }
}


.consult-btn {
  margin-top: 20px;
}

.consult-btn a {
  display: inline-block;
  background-color: #f76540;
  color: #fff;
  width: 550px;
  text-decoration: none;
  font-size: 20px;
  padding: 12px 24px;
  border-radius: 6px;
  transition: background-color 0.3s ease;
  letter-spacing: 2px;
  font-weight: 600;
}

.consult-btn a:hover {
  background-color: #e65330;
}

@media screen and (max-width:640px) {
  .consult-btn a {
  display: inline-block;
  background-color: #f76540;
  color: #fff;
  width: 550px;
  text-decoration: none;
  font-size: 16px;
  padding: 12px 20px;
  border-radius: 6px;
  transition: background-color 0.3s ease;
  letter-spacing: 2px;
}
}


/* ----------------------------------
merits-section
---------------------------------- */

.merits-section {
  background-color: #f9f9f9;
  padding: 64px 24px;
  overflow: hidden;
  position: relative;
 padding-bottom: 110px;
}

.merits-section__container {
  margin: 0 auto;
  width: 1100px;
}

.merit-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.merit-card {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}

.merit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

.merit-title {
  font-size: 16px;
  color: #1a1a1a;
  margin-bottom: 0.8rem;
  font-weight: 600;
}

.merit-description {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}


/* ----------------------------------
voice__section
---------------------------------- */
.voice__section {
  background-color: #f9f9f9;
  padding: 64px 24px 110px;
  overflow: hidden;
  position: relative;
}

.voice__container {
  max-width: 1100px;
  margin: 0 auto;
  color: #4ba288;
}

.voice__subtitle {
  font-size: 20px;
  font-weight: 600;
  margin: 50px 0 16px 0;
  color: #4ba288;
  border-left: 4px solid #4ba288;
  padding-left: 12px;
}

/* リストを縦並び（デフォルト）に */
.voice__list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: #333;
}

/* 各お客様のカード */
.voice__item {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 画像は上部中央に */
.voice__img {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* テキスト部分 */
.voice__content {
  width: 100%;
}

.voice__content strong {
  display: block;
  font-weight: 700;
  color: #1a1a1a;
  font-size: 18px;
  margin-bottom: 8px;
}

.voice__info {
  font-size: 14px;
  color: #4ba288;
  margin-bottom: 12px;
  font-weight: 600;
}

.voice__content p {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 auto;
  color: #333;
}

/* ==== スマホ（〜767px）用のスタイル ==== */
@media (max-width: 767px) {
  .voice__section {
    padding: 40px 16px 80px;
  }

  .voice__container {
    max-width: 100%;
  }

  .voice__subtitle {
    font-size: 17px;
    margin: 40px 0 12px 0;
    padding-left: 10px;
  }

  .voice__list {
    gap: 24px;
  }

  .voice__item {
    padding: 16px;
  }

  .voice__img {
    width: 240px;
    height: 240px;
    margin-bottom: 25px;
  }

  .voice__content strong {
    font-size: 16px;
  }

  .voice__info {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .voice__content p {
    font-size: 12px;
    max-width: 100%;
  }
}



/* ----------------------------------
concierge__section
---------------------------------- */

.concierge__section {
  background-color: #f9f9f9;
  padding: 64px 24px;
  overflow: hidden;
  position: relative;
}

.concierge__section {
  padding: 64px 24px;
  background-color: #ffffff;
}

.concierge__container {
  max-width: 1100px;
  margin: 0 auto;
}

.concierge__heading {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 16px;
  color: #4ba288;
}

.concierge__subheading {
  text-align: center;
  font-size: 16px;
  color: #444;
  margin-bottom: 40px;
}

.concierge__staff-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 150px;
}

.concierge__staff-card {
  width: 240px;
  text-align: center;
}

.concierge__staff-image {
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

.concierge__staff-name {
  font-size: 16px;
  font-weight: bold;
  margin-top: 16px;
  color: #333;
}

.concierge__staff-text {
  font-size: 14px;
  color: #666;
}

.concierge__message {
  margin-top: 64px;
  text-align: center;
}

.concierge__message-heading {
  font-size: 22px;
  margin-bottom: 16px;
  color: #4ba288;
}

.concierge__message-text {
  font-size: 15px;
  color: #444;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto;
}

.concierge__reserve-button {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 20px;
  background-color: #f76540;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  transition: background-color 0.3s;
}

.concierge__reserve-button:hover {
  background-color: #e05636;
}



/* ----------------------------------
consultation__flow
---------------------------------- */

.consultation__flow {
  background-color: #f9f9f9;
  padding: 64px 24px;
  overflow: hidden;
  position: relative;
}


.concierge__flow__container {
  max-width: 1100px;
  margin: 0 auto;
}

.consultation__title {
  text-align: center;
  font-size: 28px;
  margin-bottom: 40px;
}

.consultation__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .consultation__cards {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .consultation__flow {
  padding: 64px 12px;
  background-color: #f9f9f9;
}

  .consultation__card {
    width: 100%; /* または max-width: 300px; 等で調整 */
  }
}

.consultation__card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.consultation__card:hover {
  transform: translateY(-4px);
}

.consultation__card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.consultation__card-content {
  padding: 16px;
  text-align: center;
}

.consultation__card-content h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.consultation__card-content p {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}


/* ----------------------------------
consultation__cta
---------------------------------- */

.consultation__cta {
  background-color: #f9f9f9;
  padding: 64px 24px;
  overflow: hidden;
  position: relative;
}


.consultation__examples {
  background-color: #f9f9f9;
  padding: 64px 24px;
  overflow: hidden;
  position: relative;
}

.consultation__examples-container {
  width: 1100px;
  margin: 0 auto;
}
.consultation__examples h2 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 32px;
}

.consultation__card-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 55px;
}

.consultation__card {
  width: 280px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.consultation__card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.consultation__card-content {
  padding: 16px;
}

.consultation__card-content h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.consultation__card-content p {
  font-size: 14px;
  color: #555;
}



/* ----------------------------
   smarthouse
---------------------------- */
.smarthouse {
  background-color: #fff;
  padding: 4rem 2rem;
  color: #333;
}

.smarthouse__container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.smarthouse__title {
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 1rem;
  line-height: 1.4;
  text-align: center;
}

.smarthouse__title span {
  display: block;
  font-size: 1.25rem;
  color: #666;
  margin-top: 0.5rem;
}

.smarthouse__lead {
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: #4ca88c;
  line-height: 1.5;
}

.smarthouse__body p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: #444;
}

@media screen and (max-width: 768px) {
  .smarthouse__title {
    font-size: 1.5rem;
  }

  .smarthouse__title span {
    font-size: 1rem;
  }

  .smarthouse__lead {
    font-size: 18px;
    line-height: 1.5;
  }

  .smarthouse__body p {
    font-size: 0.95rem;
  }
}

.smarthouse__icon {
  text-align: center;
  margin-bottom: 50px;
}

.smarthouse__icon img {
  width: 150px; /* PC用 */
  height: auto;
}

/* スマホサイズで縮小 */
@media screen and (max-width: 768px) {
  .smarthouse__icon img {
    width: 100px; /* SP用 */
  }
}


/* ----------------------------
   smarthouseページ内のenergy-content
---------------------------- */


.energy-content {
  background-color: #f4f9f7;
  padding: 110px 2rem;
  color: #333;
}

.energy-content__container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.energy-content__leadblock {
  text-align: center;
}

.energy-content__leadtext {
  font-size: 42px;
  font-weight: bold;
  color: #4ca88c;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.energy-content__subtitle {
  text-align: center;
  font-size: 1.8rem;
  color: #4ca88c;
  margin-bottom: 2rem;
}

.energy-content__intro {
  color: #444;
  margin: 0 auto;
}

.energy-content__cards {
  margin-top: 4rem;
}

.energy-content__cardlist {
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.energy-content__card {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.energy-content__card:nth-child(even) {
  flex-direction: row-reverse;
}

.energy-content__cardimage {
  flex: 1;
  position: relative;
  min-width: 40%;
  z-index: 1;
}

.energy-content__cardimage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.energy-content__cardtext {
  flex: 1;
  padding: 2rem;
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  z-index: 2;
  margin-left: -200px;
}

.energy-content__card:nth-child(even) .energy-content__cardtext {
  margin-left: 0;
  margin-right: -200px;
}

.energy-content__cardtext h4 {
  font-size: 24px;
  line-height: 1.8;
  color: #777;
  margin: 0;
}

/* SP対応 */
@media screen and (max-width: 768px) {
  .energy-content__leadtext {
    font-size: 1.4rem;
  }

  .energy-content__subtitle {
    font-size: 18px;
  }

  .energy-content__cardlist {
    gap: 50px;
  }

  .energy-content__card,
  .energy-content__card:nth-child(even) {
    flex-direction: column !important;
  }

  .energy-content__cardtext {
    margin: 0 !important;
    padding: 1.5rem;
    border-radius: 0;
  }

  .energy-content__cardimage,
  .energy-content__cardtext {
    width: 100%;
  }

  .energy-content__cardtext h4 {
    font-size: 18px;
  }
}

/* PC用：画像を少し大きめに */
@media screen and (min-width: 769px) {
  .energy-content__cardimage {
    flex: 2;
  }

  .energy-content__cardtext {
    flex: 1;
  }

  .energy-content__cardimage img {
    border-radius: 16px;
  }
}



/* ----------------------------
   content-block white
---------------------------- */

.content-block {
  padding: 4rem 2rem;
  color: #fff;
}

.content-block__title {
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 1rem;
  line-height: 1.4;
  color: #fff;
}

.content-block__title span {
  display: block;
  font-size: 1.25rem;
  color: #fff; /* 元の #666 を白に統一 */
  margin-top: 0.5rem;
}

.content-block__lead {
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: #fff; /* 元のアクセントカラーを白に統一 */
  line-height: 1.5;
}

.content-block__body p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: #fff; /* 濃いグレーを白に変更 */
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .content-block__title {
    font-size: 1.5rem;
  }

  .content-block__title span {
    font-size: 1rem;
  }

  .content-block__lead {
    font-size: 22px;
    line-height: 1.5;
  }

  .content-block__body p {
    font-size: 0.95rem;
  }
}



/* ----------------------------
   smarthouse-solution
---------------------------- */
.smarthouse-solution {
  background-color: #f8fdfc;
  padding: 4rem 2rem;
  color: #333;
}

.smarthouse-solution__container {
  max-width: 1200px;
  margin: 0 auto;
}

.smarthouse-solution__heading {
  text-align: center;
  margin-bottom: 3rem;
}

.smarthouse-solution__title {
  font-size: 42px;
  font-weight: bold;
  color: #4ca88c;
  line-height: 1.5;
}

.smarthouse-solution__title span {
  display: block;
  font-size: 1.25rem;
  color: #ffffff;
  margin-top: 0.5rem;
}

.smarthouse-solution__section {
  background-image: url(../images/smarthouse_01_k.jpg);
  padding: 80px 20% 100px;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.smarthouse-solution__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
  gap: 40px;
}

.smarthouse-solution__card {
  border: 1px solid rgba(255, 255, 255, 0.6);
  min-height: 320px; /* ← 例：元より大きめに調整 */
  padding: 32px; 
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  backdrop-filter: blur(4px);
}

.smarthouse-solution__card:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-4px);
}

.smarthouse-solution__cardtitle {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.smarthouse-solution__desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #ffffff;
}

.smarthouse-solution__icon {
  text-align: center;
  margin-bottom: 16px;
}

.smarthouse-solution__icon img {
  width: 120px;      /* お好みで調整可能 */
  height: auto;
  display: inline-block;
}


/* ----------------------------
   responsive (max-width: 768px)
---------------------------- */
@media screen and (max-width: 768px) {
  .smarthouse-solution__section {
    padding: 60px 4%;
    min-height: auto;
    background-size: cover;
    background-position: center;
  }

  .smarthouse-solution__cards {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 
    gap: 24px;
  }

  .smarthouse-solution__card {
    padding: 20px;
    border-radius: 16px;
  }

  .smarthouse-solution__cardtitle {
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 16px;
  }

  .smarthouse-solution__desc {
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: left;
  }

  .smarthouse-solution__title {
    font-size: 1.6rem;
    text-align: center;
    line-height: 1.4;
  }

  .smarthouse-solution__title span {
    font-size: 1rem;
    color: #ffffff;
  }

  .smarthouse-solution__container {
    padding: 0;
  }
}


/* ----------------------------------
   circle
---------------------------------- */

.circle {
  font-family: "NotoSansJP","Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "游ゴシック", "MS PGothic", sans-serif;
  width: 80%; /* 親要素の幅に対してのサイズ（調整可能） */
  aspect-ratio: 1 / 1; /* 正円を維持 */
  border: 1px solid #777; /* 円の境界線 */
  border-radius: 50%; /* 円形にする */
  display: flex; /* 中央揃えにするため */
  flex-direction: column; /* テキストを縦に並べる */
  align-items: center; /* 横方向中央揃え */
  justify-content: center; /* 縦方向中央揃え */
  text-align: center; /* テキストを中央揃え */
  font-size: 26px; /* テキストサイズ */
  color: #555; /* テキスト色 */
  background-color: #f9f9f9; /* 背景色 */
  padding: 10px; /* 内側の余白 */
  height: 100%; /* 高さを100%に設定して中央に配置 */
}

.circle span {
  font-family: "NotoSansJP","Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "游ゴシック", "MS PGothic", sans-serif;
  display: block; /* 改行されたテキストが縦に並ぶように */
  line-height: 1.2; /* 行間の調整 */
}

@media screen and (max-width:640px) {
  .circle {
    font-family: "NotoSansJP","Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "游ゴシック", "MS PGothic", sans-serif;
    width: 90%; /* 親要素の幅に対してのサイズ（調整可能） */
    aspect-ratio: 1 / 1; /* 正円を維持 */
    border: 1px solid #777; /* 円の境界線 */
    border-radius: 50%; /* 円形にする */
    display: flex; /* 中央揃えにするため */
    flex-direction: column; /* テキストを縦に並べる */
    align-items: center; /* 横方向中央揃え */
    justify-content: center; /* 縦方向中央揃え */
    text-align: center; /* テキストを中央揃え */
    font-size: 12px; /* テキストサイズ */
    color: #555; /* テキスト色 */
    background-color: #f9f9f9; /* 背景色 */
    padding: 10px; /* 内側の余白 */
  }
}





.content__images_area {
  padding: 50px 0;
  
}

.content__images { 
  width: 90%;
  list-style: none;
  /*padding: 50px 0;*/
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  /* gap: 10px;*/
}

.content__images img {
  max-width: 100%; 
  display: block; 
  /*border-radius: 10px; */
}

.radius_01 {
  border-top-left-radius: 10px;
}
.radius_02 {
  border-top-right-radius: 10px;
}
.radius_03 {
  border-bottom-left-radius: 10px;
}
.radius_04 {
  border-bottom-right-radius: 10px;
}

@media screen and (max-width: 640px) {
  .content__images {
    width: 100%;
    list-style: none;
    /*padding: 10px 0;*/
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    /*gap: 10px;*/
  }
}







/*----------------------------------------------------------------------*/
/*contact section*/

.contact {
  background-image: url(../images/bg_06_85.png);
}

.contact {
  color: #777/*rgba(255, 255, 255, 0.9)*/; 
  overflow: hidden;
  position: relative;
}

.social-icons {
  width: 40%;
  list-style: none;
  padding: 25px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.social-icons li {
  display: inline-block;
}
.social-icons li:last-child {
  margin-right: 0;
}
.social-icons a {
  color: #ffffff;
  text-decoration: none;
  width: 10px; 
}

.social-icons img {
  max-width: 28px;
}

.contact-images img {
  border-radius: 15px;
}


@media screen and (max-width:640px) {
  .social-icons {
    width: 80%;
    list-style: none;
    padding: 25px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
}




.qa {
    background: #fff;
  }

  .qa__inner {
    padding: 90px 0 100px
  }
  
  .qa__ttl {
    font-size: 50px;
    margin: 0 0 30px;
    line-height: normal;
    font-weight: 200;
    padding-bottom: 110px;
    padding: 0 1rem;
    border-left: 5px solid #3e95b9;
  }

 
  @media screen and (max-width: 640px) {
    .qa__ttl {
      font-size: 30px;
      margin: 0 0 50px;
      line-height: normal;
      text-align: left;
    }
  }
  
  .qa__list {
    max-width: 1000px;
    margin: 0 auto
  }
  
  .qa__list--item {
    margin-bottom: 30px
  }
  
  .qa__list--item:last-of-type {
    margin-bottom: 0
  }
  
  .qa-ac {
    cursor: pointer;
    padding: 3% 50px 3% 64px;
    position: relative;
    background: #eee;
    /*border-left: solid 8px #012D5B*/
  }
  
  @media screen and (max-width:640px) {
    .qa-ac {
      padding: 3% 50px 3% 54px
    }
  }
  
  .qa-ac__cont {
    display: none;
    width: 95%;
    padding: 40px 0 50px 10%
  }
  
  @media screen and (max-width:640px) {
    .qa-ac__cont {
      padding: 20px 0 30px 54px
    }
  }
  
  .qa-ac__icon {
    position: absolute;
    color: #999;
    font-size: 16px;
    font-size: 0.8rem;
    right: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
  }
  
  .qa-ac__icon:after {
    content: '\f067';
    display: block;
    font-weight: bold;
    font-family: "Font Awesome 5 Free"
  }
  
  .qa-ac__icon.open:after {
    content: '\f2d1';
    padding-bottom: 10px
  }
  
  .qa-ac__q {
    position: absolute;
    left: 16px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-family: 'Roboto', sans-serif;
    color: #3e95b9;
    font-size: 40px;
    font-size: 2rem
  }
  
  @media screen and (max-width:640px) {
    .qa-ac__q {
      font-size: 30px;
      font-size: 1.5rem
    }
  }
  
  .qa__list--item:first-of-type .qa-ac__cont {
    display: block
  }

.contact-top {
  position: relative;
  /*background-color: #3e95b9;*/
}

.contact-top:before {
  content: '';
  position: absolute;
  display: block;
  background: url("../images/contact_arrowb.png") no-repeat;
  background-size: contain;
  width: 100px;
  height: 50px;
  bottom: -50px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%)
}

@media screen and (max-width:640px) {
  .contact-top:before {
    background: url("../images/contact_arrowb.png") no-repeat center top/70%
  }
}

.contact-top__inner {
  padding: 50px 0
}

.contact-top__ttl {
  color: #fff;
  margin-bottom: 40px
}

@media screen and (max-width:768px) {
  .contact-top__ttl {
    font-size: 5.0vw
  }
}

@media screen and (max-width:640px) {
  .contact-top__ttl {
    font-size: 7.2vw
  }
}

.contact-top__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

@media screen and (max-width:768px) {
  .contact-top__box {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
  }
}

.contact-top__telarea {
  width: 50%;
  text-align: center;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1
}

.contact-top__telbox {
  display: flex;
  justify-content: center; /* 水平方向の中央揃え */
  align-items: center; /* 垂直方向の中央揃え */
}

@media screen and (max-width:768px) {
  .contact-top__telarea {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2
  }
}

.contact-top__tel {
  border-radius: 5px;
  display: block;
  padding: 16px 10px 10px;
  border: solid 2px #fff;
  color: #fff;
  line-height: 1;
  font-size: 18px;
  font-size: 0.9rem
}

.contact-top__tel--no {
  display: block;
  font-size: 44px;
  font-size: 2.2rem;
  font-family: 'Roboto', sans-serif;
  font-style: italic;
  font-weight: normal;
  line-height: 1
}

.contact-top__tel--no:before {
  content: '';
  background: url("../images/tel-white.png") no-repeat;
  background-size: contain;
  width: 40px;
  height: 27px;
  display: inline-block;
  vertical-align: baseline;
  margin-right: 10px
}

.contact-top__tel--note {
  display: block;
  font-size: 16px;
  font-size: 0.8rem
}

.contact-top__img {
  margin-left: 5.5%;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2
}

@media screen and (max-width:768px) {
  .contact-top__img {
    margin: 0 auto 20px;
    text-align: center;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
  }
}

@media screen and (max-width:640px) {
  .contact-top__img {
    width: 90%
  }
}

.contact-main {
  background: #f7f7f7
}

.contact-main__inner {
  padding: 100px 0
}

.contact-main__txt {
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px
}

@media screen and (max-width:768px) {
  .contact-main__txt {
    margin-bottom: 60px
  }
}

input, select, textarea {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 3px;
  border: none;
  outline: none;
  padding-left: 30px;
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "YuGothic", "Yu Gothic", "游ゴシック", "メイリオ", "Meiryo", sans-serif;
  font-size: 18px;
  font-size: 0.9rem
}

.form {
  overflow: hidden;
  max-width: 900px;
  width: 100%;
  margin: 0 auto 80px
}

.form tbody {
  display: block
}

@media screen and (max-width:768px) {
  .form__br {
    display: none
  }
}

.form__tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 40px
}

@media screen and (max-width:768px) {
  .form__tr {
    display: block
  }
}

.form__tr:last-of-type {
  margin-bottom: 0
}

.form__th {
  text-align: left;
  line-height: 1.4;
  font-weight: bold;
  padding-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 250px
}

@media screen and (max-width:768px) {
  .form__th {
    padding-top: 0;
    margin-bottom: 14px
  }
}

.form__td {
  display: block;
  width: calc(100% - 250px - 40px);
  margin-left: 40px
}

@media screen and (max-width:768px) {
  .form__td {
    width: 100%;
    margin-left: 0
  }
}

.form__td--short {
  max-width: 400px
}

@media screen and (max-width:640px) {
  .form__td--short {
    width: 100%;
    max-width: inherit
  }
}

.form__td--radio-wrap {
  padding: 0 0 0 70px;
  margin-bottom: 40px
}

.form__td--radio-wrap:nth-of-type(2) {
  margin-bottom: 0
}

.form__td--radio {
  width: calc(100% - 250px - 40px);
  margin-left: 40px;
  padding: 10px 0
}

@media screen and (max-width:768px) {
  .form__td--radio {
    display: block;
    width: 100%;
    margin-left: 0;
    padding-left: 80px
  }
}

@media screen and (max-width:640px) {
  .form__td--radio {
    padding-left: 0
  }
}

.form__td--radio span {
  cursor: pointer;
  position: relative;
  font-weight: 500
}

.form__td--radio span:before {
  position: absolute;
  left: -70px;
  top: -12px;
  content: '';
  width: 50px;
  height: 50px;
  border: solid 2px #ccc;
  border-radius: 50%;
  background: #fff
}

.form__td--radio span:after {
  position: absolute;
  left: -55px;
  top: 3px;
  content: '';
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f39600;
  opacity: 0
}

.form__td--radio input:checked+span:after {
  opacity: 1
}

.form__td--radio input {
  display: none
}

.form__input {
  font-size: 22px;
  font-size: 1.1rem;
  min-height: 70px;
  width: 100%;
  border: solid 2px #ccc;
  border-radius: 10px!important;
  padding: 6px 16px;
  display: block
}

@media screen and (max-width:640px) {
  .form__input {
    font-size: 18px;
    font-size: 0.9rem
  }
}

.form__input--short {
  display: block;
  max-width: 400px
}

@media screen and (max-width:640px) {
  .form__input--short {
    width: 100%;
    max-width: inherit
  }
}

.form__require {
  font-size: 18px;
  font-size: 0.9rem;
  font-weight: normal;
  background: #cb2020;
  color: #fff;
  min-width: 60px;
  height: 30px;
  line-height: 30px;
  display: block;
  margin-right: 20px;
  text-align: center
}

.form__agree {
  text-align: center;
  font-size: 26px;
  font-size: 1.3rem;
  font-weight: bold;
  color: #999;
  margin-bottom: 10px
}

@media screen and (max-width:768px) {
  .form__agree {
    padding-left: 30px
  }
}

@media screen and (max-width:640px) {
  .form__agree {
    font-size: 20px;
    font-size: 1rem
  }
}

.form__agree input {
  display: none
}

.form__agree input[type=checkbox]:checked+span {
  color: #012D5B
}

.form__agree span {
  position: relative;
  cursor: pointer
}

.form__agree span:before {
  content: '';
  position: absolute;
  left: -70px;
  top: 0;
  bottom: 0;
  border-radius: 10px;
  margin: auto;
  width: 50px;
  height: 50px;
  border: solid 2px #ccc;
  background: #fff
}

@media screen and (max-width:640px) {
  .form__agree span:before {
    left: -60px;
    width: 40px;
    height: 40px
  }
}

.form__agree span:after {
  font-size: 28px;
  font-size: 1.4rem;
  position: absolute;
  left: -56px;
  top: -8px;
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  color: #012D5B;
  opacity: 0
}

@media screen and (max-width:640px) {
  .form__agree span:after {
    left: -52px;
    top: -12px
  }
}

.form__agree input[type=checkbox]:checked+span:after {
  opacity: 1
}

.form__ex {
  display: block;
  font-size: 16px;
  font-size: 0.8rem;
  text-align: left;
  font-weight: normal;
  margin-top: 4px
}

.form__ex--radio {
  text-indent: -1em;
  padding-left: 1em
}

.form__error {
  font-size: 14px;
  font-size: 0.7rem;
  display: none!important;
  background: #cb2020;
  color: #fff;
  font-weight: bold;
  padding: 5px 10px
}

.form__error:before {
  color: #fff;
  margin-right: 5px;
  content: '\f12a';
  font-weight: bold;
  font-family: "Font Awesome 5 Free"
}

.form__error--center {
  text-align: center
}

.form__error.on {
  display: block!important
}

.form__btn {
  text-align: center;
  position: relative;
  display: block;
  cursor: pointer;
  margin: 0 auto;
  border-radius: 10px;
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "YuGothic", "Yu Gothic", "游ゴシック", "メイリオ", "Meiryo", sans-serif;
  background: #012D5B;
  color: #fff;
  outline: none;
  width: 600px;
  height: 80px;
  line-height: 80px;
  border: none;
  border-bottom: solid 4px #556f9c;
  font-size: 26px;
  font-size: 1.3rem;
  font-weight: bold;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s
}

@media screen and (max-width:640px) {
  .form__btn {
    font-size: 22px;
    font-size: 1.1rem
  }
}

.form__btn:disabled {
  cursor: not-allowed;
  background: #ababab;
  -webkit-transform: translateY(2px);
  -ms-transform: translateY(2px);
  transform: translateY(2px);
  border-bottom: none
}

.form__btn:hover {
  border-bottom: none;
  -webkit-transform: translateY(2px);
  -ms-transform: translateY(2px);
  transform: translateY(2px);
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s
}

.form__btn:after {
  content: '';
  right: 30px;
  position: absolute;
  color: #fff;
  margin-left: 10px;
  content: '\f061';
  font-weight: bold;
  font-family: "Font Awesome 5 Free"
}

@media screen and (max-width:640px) {
  .form__btn:after {
    position: static
  }
}

.form__btn--sent {
  margin-top: 20px;
  margin-bottom: 20px;
  background: #ef8013;
  border-bottom: solid 4px #8e5620
}

.form__btn--back:after {
  display: none
}

.form__btn--back:before {
  content: '';
  left: 30px;
  position: absolute;
  color: #fff;
  margin-right: 10px;
  content: '\f060';
  font-weight: bold;
  font-family: "Font Awesome 5 Free"
}

@media screen and (max-width:640px) {
  .form__btn--back:before {
    position: static
  }
}

.form__submit {
  margin-top: 20px
}

.form-privacy {
  margin-bottom: 60px;
  padding: 0 20%;
}

.form-privacy__ttl {
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px
}

.form-privacy__list li {
  list-style: inside
}

.form-privacy__txt {
  font-size: 18px;
  font-size: 0.9rem;
  border: solid 2px #ccc;
  background: #fff;
  height: 200px;
  overflow-y: scroll;
  border-radius: 10px;
  padding: 30px 50px;
  margin-bottom: 60px
}

@media screen and (max-width:640px) {
  .form-privacy__txt {
    font-size: 16px;
    font-size: 0.8rem;
    padding: 20px
  }
}

.form-privacy__txt::-webkit-scrollbar {
  width: 6px;
  height: 6px
}

.form-privacy__txt::-webkit-scrollbar-track {
  border: solid 1px #ECECEC;
  border-radius: 10px
}

.form-privacy__txt::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px
}

.form-privacy__txt p {
  margin-bottom: 10px
}

.thanks {
  background: url("../images/town-gray.png") repeat-x center bottom
}

.thanks__inner {
  padding: 160px 0 120px
}

@media screen and (max-width:640px) {
  .thanks__inner {
    padding: 120px 0 120px
  }
}

.thanks__ttl {
  margin-bottom: 40px
}

.thanks__img {
  text-align: center;
  line-height: 0;
  margin-bottom: 20px
}

.thanks__telarea {
  margin: 0 auto
}

.thanks__tel {
  border: solid 2px #556f9c;
  color: #556f9c
}

.thanks__tel--no:before {
  background: url(../images/tel-blu.png) no-repeat;
  background-size: contain
}

.thanks__txt {
  text-align: center;
  margin-bottom: 40px
}

.thanks__btn {
  margin: 60px auto 0
}

.thanks__btn--link:after {
  display: none
}

.thanks__btn--link:before {
  content: '';
  left: 30px;
  position: absolute;
  color: #fff;
  margin-right: 10px;
  content: '\f060';
  font-weight: bold;
  font-family: "Font Awesome 5 Free"
}

@media screen and (max-width:640px) {
  .thanks__btn--link:before {
    position: static
  }
}

.confirm {
  background: url("../images/town-gray.png") repeat-x center bottom
}

.confirm__inner {
  padding: 90px 0 120px
}

@media screen and (max-width:640px) {
  .confirm__inner {
    padding: 70px 0 120px
  }
}

.confirm__ttl {
  margin-bottom: 40px
}

.confirm__txt {
  text-align: center;
  margin-bottom: 40px
}

.confirm__tbl {
  margin: 60px auto 80px
}

.confirm__tbl .form__th {
  padding-top: 0
}

.error {
  margin-bottom: 60px
}

.error__list {
  max-width: 600px;
  width: 90%;
  margin: 0 auto
}

.error__messe {
  font-weight: bold;
  margin-bottom: 10px
}

@media screen and (min-width:641px) {
  .error__messe {
    margin-bottom: 20px
  }
}

.error__messe span {
  color: #c70f1f
}

.company {
  background-image: -webkit-gradient(linear, left top, right top, from(#4ca88c), to(#52d8af));
  background-image: -o-linear-gradient(left, #4ca88c 0%, #52d8af 100%);
  background-image: linear-gradient(90deg, #4ca88c 0%, #52d8af 100%);
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
}

.company__inner {
  padding: 90px 0 120px
}

@media screen and (max-width:640px) {
  .company__inner {
    padding: 70px 0 120px
  }
}




.company__ttl {
  margin-bottom: 70px
}

@media screen and (max-width:768px) {
  .company__ttl {
    font-size: 36px;
    font-size: 1.8rem
  }
}

@media screen and (max-width:640px) {
  .company__ttl {
    font-size: 32px;
    font-size: 1.6rem;
    margin-bottom: 40px
  }
}

.company__ttl {
  font-size: 40px;
  margin: 0 0 110px;
  line-height: normal;
  font-weight: 400;
  padding-bottom: 110px;
  padding: 0 1rem;
  /*border-left: 5px solid #3e95b9;*/
}


@media screen and (max-width: 640px) {
  .company__ttl {
    font-size: 30px;
    margin: 0 0 50px;
    line-height: normal;
    text-align: left;
  }
}

.company__tbl {
  max-width: 900px;
  width: 96%;
  margin: 0 auto
}

.company__tbl tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 50px
}

@media screen and (max-width:640px) {
  .company__tbl tr {
    display: block
  }
}

.company__tbl tr:last-of-type {
  margin-bottom: 0
}

@media screen and (max-width:640px) {
  .company__tbl td {
    display: block
  }
}

.company__tbl td:first-of-type {
  width: 180px;
  font-weight: bold;
  padding: 0 0 10px 20px;
  border-bottom: solid 3px #ffffff
}

@media screen and (max-width:640px) {
  .company__tbl td:first-of-type {
    width: 100%;
    padding: 0 0 10px 10px
  }
}

.company__tbl td:nth-of-type(2) {
  width: calc(100% - 180px);
  padding: 0 0 10px 40px;
  border-bottom: solid 1px #ffffff
}

@media screen and (max-width:640px) {
  .company__tbl td:nth-of-type(2) {
    width: 100%;
    padding: 20px 10px 0 10px;
    border-bottom: none
  }
}

.company__tbl--office {
  margin-bottom: 20px
}

.company__tbl--item {
  display: block;
  text-indent: -1em;
  padding-left: 1em
}

.ftr {
  padding: 40px 0;
  background: #ffffff;
  text-align: center;
  overflow: hidden;
  position: relative;
}

@media screen and (max-width:640px) {
  .ftr img {
    width: 70%;
  }
}

.ftr small {
  font-size: 16px;
  font-size: 0.8rem;
  display: block;
  margin-top: 20px;
  color: #999
}

.form__td--radio-wrap:nth-of-type(3) {
  margin-bottom: 0;
  margin-top: 40px;
}

.cookie-consent {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size: 12px;
  color: #fff;
  background: rgba(0,0,0,.7);
  padding: 1.2em;
  box-sizing: border-box;
  visibility: hidden;
  z-index:10000;
}
.cookie-consent.is-show {
  visibility: visible;
}
.cookie-consent a {
  color: #fff !important;
  }
  .cookie-text {
    margin-bottom: 1em;
    width: 75%;
  }
  .cookie-btn {
    display: flex;
  }
.cookie-agree {
  color: #5e5c5c;
  background: #ffffff;
  padding: .5em 1.5em;
  margin-left: 20px;
  border: 1px solid #5e5c5c;
}
.cookie-reject {
  color: #fff;
  background: rgb(75, 77, 78);
  padding: .5em .9em;
  margin-left: 20px;
  margin-right: 50px;
  border: 1px solid #ffffff;
}
.cookie-agree:hover, .cookie-reject:hover {
  cursor: pointer;
}

.cc-hide1 {
  display: none;
}

.cc-hide2 {
  animation: hide 1s linear 0s;
  animation-fill-mode: forwards;
}
@keyframes hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@media screen and (max-width: 640px) {
  .cookie-consent {
    flex-direction: column;
  }
  .cookie-text {
    margin-bottom: .5em;
    width: 95%;
  }
  .cookie-agree {
    margin: 5px;
  }
  .cookie-reject {
    margin: 5px;
  }

  }



.txt--bold {
  font-weight: bold;
}

.txt__wht {
  color: #fff;
}

.caption {
  font-size: 0.8rem;
  margin-top: 10px;
  text-align: left;
}


.left-align {
  text-align: left;
  padding-left: 1rem;
}

@media screen and (max-width: 768px) {
  .left-align {
    text-align: left;
    padding-left: .4rem;
  }
  
}

.cta_banner {
  display: flex;
  justify-content: center; 
  align-items: center;
  margin: 0;
}


.cta_banner p {
  text-align: center;
}

.cta_banner img {
  display: block;
  max-width: 100%;
  width: 500px;
  height: auto;
  margin-bottom: 20px;
}

/* メール配信の許可セクション */
.form__permission {
  vertical-align: middle;
}

/* ラベル内の要素を横並びにする */
.form__permission-label {
  display: flex;
  align-items: center; /* 縦方向の位置を中央揃え */
  gap: 8px; /* チェックボックスとテキストの間隔 */
  line-height: 1.5; /* テキストの高さを調整 */
}

/* チェックボックスのサイズと表示調整 */
.form__permission-checkbox {
  width: 16px;
  height: 16px;
  display: inline-block;
  appearance: auto;
  opacity: 1;
  visibility: visible;
}

.separator {
  border: 0;
  height: 1px;
  background: #777;
  margin: 30px 0;
  margin-bottom: 70px;
  opacity: 0.6;
}


.text-white {
  color: #fff;
}

.ymaker {
  background: linear-gradient(transparent 50%, rgba(217, 247, 50, 0.5) 50%);
}

.shdowEffect {
	text-shadow: 0px 0px 11px #384852;
  /*text-shadow: 0px 0px 11px #1f1f1f;*/
}

.shop__img {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 60px; /* 下部に余白 */
}

.shop__img img {
  width: 100%;
  max-width: 850px;
  height: 450px;         /* 高さを制限（お好みで調整） */
  object-fit: cover;     /* はみ出た部分をトリミング */
  border-radius: 12px;   /* 角を丸く */
  display: block;
}

@media screen and (max-width: 767px) {
  .shop__img img {
    height: 180px;  /* 高さをやや狭くして横長に */
    border-radius: 8px; /* 角丸を少し控えめに */
  }
}


/* ----------------------------
   コラム一覧ページ用 column-list-content
---------------------------- */
.column-list-content-section {
  padding: 40px 20px;
  background-color: #fff;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
}

.column-list-content-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

.column-list-content-block {
  display: flex;
  gap: 30px;
  align-items: center;
  flex-wrap: wrap;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 20px;
  background-color: #f9f9f9;
  transition: box-shadow 0.3s ease;
}

.column-list-content-block:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.column-list-content-image {
  flex: 1 1 320px;
  max-width: 320px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.column-list-content-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
}

.column-list-content-text {
  flex: 2 1 600px;
  min-width: 280px;
}

.column-list-content-title {
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  line-height: 1.2;
  color: #222;
}

.column-list-content-lead {
  font-size: 1.6rem;
  font-weight: 600;
  color: #4ca88c;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.column-list-content-text p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #444;
  margin-bottom: 1rem;
}

@media screen and (max-width: 1024px) {
  .column-list-content-block {
    flex-direction: column;
    gap: 20px;
  }
  
  .column-list-content-image,
  .column-list-content-text {
    max-width: 100%;
    flex: none;
  }
  
  .column-list-content-title {
    font-size: 2rem;
  }
  
  .column-list-content-lead {
    font-size: 1.3rem;
  }
}

@media screen and (max-width: 480px) {
  .column-list-content-title {
    font-size: 1.6rem;
  }
  
  .column-list-content-lead {
    font-size: 1.1rem;
  }
  
  .column-list-content-text p {
    font-size: 1rem;
  }
}