@charset "UTF-8";

/* --------------------------
  common
-------------------------- */
.wrapper {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 0 10px 2px #d6d6d6;
  overflow-x: hidden;
}

/* 全体的な余白削除 */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  scroll-behavior: auto; /* スムーススクロールを無効化 */
  overflow-x: hidden;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
}

html {
  overflow-x: hidden;
}

/* 画像の保存・長押しメニューを抑止 */
img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

main {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

section {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* --------------------------
  スクロール表示アニメーション（蓄電池とは・電気代削減効果セクション）
  JSが画面内に入ったセクションへ is-inview を付与し、要素ごとに時間差でフェードインさせる
-------------------------- */
.explanation-inner > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}

.explanation.is-inview .explanation-inner > *:nth-child(1) { opacity: 1; transform: none; transition-delay: .1s; }
.explanation.is-inview .explanation-inner > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .2s; }
.explanation.is-inview .explanation-inner > *:nth-child(3) { opacity: 1; transform: none; transition-delay: .3s; }
.explanation.is-inview .explanation-inner > *:nth-child(4) { opacity: 1; transform: none; transition-delay: .4s; }
.explanation.is-inview .explanation-inner > *:nth-child(5) { opacity: 1; transform: none; transition-delay: .5s; }
.explanation.is-inview .explanation-inner > *:nth-child(6) { opacity: 1; transform: none; transition-delay: .6s; }

@media (prefers-reduced-motion: reduce) {
  .explanation-inner > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* SP表示時の100%レスポンシブ対応 */
@media (max-width: 1023px) {
  .wrapper {
    max-width: 100%;
    width: 100%;
    margin: 0;
    box-shadow: none;
  }
}

/* PC表示時の中央配置 */
@media (min-width: 1024px) {
  body {
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
  }

  .wrapper {
    max-width: 750px;
    width: 750px;
    margin: 0;
    /* PC表示のみ、ブラウザ全体を80%にズームしたのと同じ見た目にする。
       transform:scaleだと見た目だけ縮小されレイアウト上の余白（高さ）が
       そのまま残ってしまうため、レイアウトごと縮小されるzoomを使う。 */
    zoom: 0.8;
  }
}

/* --------------------------
  header
-------------------------- */
header {
  margin: 0;
  padding: 0;
  position: relative;
}

.header-content {
  position: relative;
  width: 100%;
}

header h1 {
  margin: 0;
  padding: 0;
}

.header-contact {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: clamp(4px, 1vw, 12px) clamp(8px, 2vw, 16px);
  z-index: 10;
}

.phone-number {
  color: #1A3C7A;
  text-shadow: 0px 0px 1px #1A3C7A;
  font-size: clamp(20px, 3.2vw, 32px);
  font-weight: bold;
  text-decoration: none;
  line-height: 1.2;
  margin-bottom: 2px;
}

.phone-number:hover {
  color: #516994;
  text-decoration: none;
}

.reception-time {
  color: #1A3C7A;
  font-size: clamp(10px, 2vw, 16px);
  font-weight: bold;
  line-height: 1.2;
  text-align: right;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

/* h2の余白削除 */
h2 {
  margin: 0;
  padding: 0;
}

/* h2.ttlの余白削除 */
h2.ttl {
  margin: 0;
  padding: 0;
  line-height: 0; /* 行の高さを0にして余白を削除 */
}

h2.ttl img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

header img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

/* --------------------------
  cv
-------------------------- */
a.cv_btn {
  display: block;
  width: calc(100% - 48px); /* 左右24pxずつの余白を引く */
  margin: 24px; /* 左右に24pxの余白 */
  text-decoration: none; /* リンクの下線を削除 */
  outline: none; /* フォーカス時のアウトラインを削除 */
}

/* CTAボタンの目立つ浮遊アニメーション（FV・施工事例・蓄電池とは・電気代削減効果セクション共通） */
.fv-btn,
.works-btn,
.explanation-btn,
.cost-simulation-btn {
  animation: float-fv 2s ease-in-out infinite;
}

/* 補助金申請実績セクションのみ、上下の振れ幅を小さくする */
.result-btn {
  animation: float-result 2s ease-in-out infinite;
}

a.cv_btn:focus {
  outline: none; /* フォーカス時のアウトラインを削除 */
}


/* --------------------------
  image sections
-------------------------- */
.result,
.benefits,
.review,
.final-cta2,
.final-cta {
  width: 100%;
  margin: 0;
  padding: 0;
}

.result img,
.benefits img,
.review img,
.final-cta2 img,
.final-cta img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.final-cta {
  text-align: center;
  padding: 0;
  position: relative; /* 相対位置指定 */
  margin-bottom: 0;
}

.final-cta2 {
  text-align: center;
  padding: 0;
  position: relative; /* 相対位置指定 */
  margin-bottom: clamp(-370px, -47vw, -280px);
}

.final-cta-container {
  position: relative; /* 相対位置指定 */
  width: 100%;
  display: block; /* ブロック要素として表示 */
}

.final-cta-bg {
  width: 100%;
}

.final-cta-bg img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.final-cta-btn {
  position: relative; /* 相対位置指定 */
  z-index: 10;
  display: block;
  width: calc(100% - 48px); /* 左右24pxずつの余白 */
  max-width: 100%; /* 最大幅を制限 */
  margin: 0 auto; /* 左右自動（中央配置） */
  transform: translateY(clamp(-390px, -44vw, -280px)); /* レスポンシブ対応：上に移動（+120px） */
  animation: float 2s ease-in-out infinite; /* アニメーション */
}

/* FVセクション専用のアニメーションのキーフレーム */
@keyframes float-fv {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* 補助金申請実績セクション専用のアニメーションのキーフレーム（上下の振れ幅を小さく） */
@keyframes float-result {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* 最終CTAセクション専用のアニメーションのキーフレーム */
@keyframes float {
  0%, 100% {
    transform: translateY(clamp(-390px, -44vw, -280px)) translateY(0px);
  }
  50% {
    transform: translateY(clamp(-390px, -44vw, -280px)) translateY(-8px);
  }
}

.fv {
  position: relative; /* CTAボタンを画像上に重ねるための基準位置 */
}

.fv .cv_btn,
.fv .fv-btn {
  position: absolute; /* 背景画像（fv2.png）の上にボタンを重ねる */
  left: 0;
  right: 0;
  bottom: 2%; /* 画像下部、青文字コピーのすぐ下あたりに配置 */
  width: 88%;
  margin: 0 auto;
}

.result .result-btn {
  position: absolute; /* 背景画像（img_result.png）最下部の白い吹き出しの空白部分に重ねる。画像サイズ1024x1571pxに合わせて上端位置(top)で配置 */
  top: 93%;
  left: 32%;
  width: 50%;
  margin: 0;
}

@media (max-width: 500px) {
  .final-cta-btn {
    transform: translateY(clamp(-260px, -41vw, -180px));
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(clamp(-260px, -41vw, -180px)) translateY(0px);
    }
    50% {
      transform: translateY(clamp(-260px, -41vw, -180px)) translateY(-8px);
    }
  }
}


/* --------------------------
  nayami（こんなお悩みありませんか）
-------------------------- */
.nayami {
  position: relative; /* 素材（吹き出し）を背景画像の上に重ねるための基準位置 */
}

.nayami-bg {
  margin: 0;
}

.nayami-bg img {
  display: block;
  width: 100%;
  height: auto;
}

.nayami-sozai {
  position: absolute;
  height: auto;
  opacity: 0; /* 表示領域に入るまでは非表示にしておき、順番にふわっと浮かび上がらせる */
}

/* 上中央：電気代、また上がってる・・ */
.nayami-sozai--01 {
  top: 17%;
  left: 46%;
  width: 56%;
  transform: translateX(-50%);
}

/* 左上：補助金、うちも対象かな */
.nayami-sozai--02 {
  top: 29%;
  left: -1.5%;
  width: 41.5%;
}

/* 右上：うちの屋根にも設置できる？ */
.nayami-sozai--03 {
  top: 29%;
  right: -1.5%;
  width: 37%;
}

/* 左下：太陽光って高いんでしょ？ */
.nayami-sozai--04 {
  top: 46.5%;
  left: -1.5%;
  width: 41.5%;
}

/* 右下：停電したらどうしよう */
.nayami-sozai--05 {
  top: 46.5%;
  right: -0.5%;
  width: 36%;
}

/* --------------------------
  素材のふわふわ浮遊アニメーション
  .nayami が画面内に入った時点でJSが is-visible を付与し、01〜05の順に浮かび上がらせる
-------------------------- */
@keyframes nayamiFloatIn {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(.9);
  }
  60% {
    opacity: 1;
    transform: translateY(-6px) scale(1.03);
  }
  80% {
    transform: translateY(2px) scale(.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --01は横中央寄せのtranslateXを常に保ったまま浮遊させる専用キーフレーム */
@keyframes nayamiFloatInCenter {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(28px) scale(.9);
  }
  60% {
    opacity: 1;
    transform: translateX(-50%) translateY(-6px) scale(1.03);
  }
  80% {
    transform: translateX(-50%) translateY(2px) scale(.99);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.nayami.is-visible .nayami-sozai--01 {
  animation: nayamiFloatInCenter .7s ease-out forwards;
  animation-delay: 0s;
}

.nayami.is-visible .nayami-sozai--02 {
  animation: nayamiFloatIn .7s ease-out forwards;
  animation-delay: .35s;
}

.nayami.is-visible .nayami-sozai--03 {
  animation: nayamiFloatIn .7s ease-out forwards;
  animation-delay: .7s;
}

.nayami.is-visible .nayami-sozai--04 {
  animation: nayamiFloatIn .7s ease-out forwards;
  animation-delay: 1.05s;
}

.nayami.is-visible .nayami-sozai--05 {
  animation: nayamiFloatIn .7s ease-out forwards;
  animation-delay: 1.4s;
}

/* --------------------------
  footer
-------------------------- */
footer {
  padding: 40px 16px;
  background-color: #1f377c;
  color: white;
  text-align: center;
  line-height: 1.5;
  z-index: 20;
  position: relative;
}

footer ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

footer ul li {
  margin: 0;
}

footer ul li a,
footer ul li a:link,
footer ul li a:visited {
  color: white;
  text-decoration: none;
  font-size: clamp(14px, 2.8vw, 20px); /* レスポンシブ対応：最小14px、最大18px */
}

footer ul li a:hover {
  text-decoration: underline;
}

footer .copyright {
  font-size: clamp(12px, 2.8vw, 16px); /* レスポンシブ対応：最小14px、最大18px */
  color: white;
}

/* Custom 250924 */
html {
  font-size: 62.5%;
}
figure,
p {
  margin: 0;
}
.relative {
  position: relative;
}
.explanation {
  background-color: #E4F2FF;
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
.explanation-inner {
  padding: 2rem 3.2rem 0rem;
}
.explanation-title {
  font-size: 3.6rem;
  font-weight: 500;
  max-width: 61rem;
  width: 100%;
  margin: 0 auto 2.8rem;
  padding: 1.3rem 0 1.8rem;
  text-align: center;
  background-color: #019AE6;
  color: #FFEF01;
  border-radius: 7rem;
}
.explanation-title-small {
  font-size: 3rem;
}
.explanation-list {
  display: flex;
  gap: .8rem;
  list-style: none;
  padding-left: 0;
}
.explanation-item {
  border-radius: 1.2rem;
  background-color: #fff;
  padding: 3.2rem 0;
  text-align: center;
  width: 100%
}
.explanation-list-img {
  width: 16rem;
  border-radius: 50%;
}
.explanation-subtitle {
  font-size: 2.4rem;
  color: #019AE6;
  margin: .8rem 0 0;
  line-height: 1.3;
}
.explanation-subtitle .orange {
  color: #FF8000;
}
.explanation-txt {
  font-size: 3.1rem;
  color: #282726;
  font-weight: bold;
  letter-spacing: .1rem;
}
.explanation-box {
  background-color: #FF4830;
  border-radius: .6rem;
  display: flex;
  padding: 1.2rem 3.8rem;
  margin: 2rem 0;
  align-items: center;
}
.explanation-box-img {
  width: 13.5rem;
}
.explanation-box-title {
  font-size: 3.2rem;
  color: #fff;
  margin: -.5rem 0 .25rem;;
}
.explanation-box-txt {
  font-size: 2.4rem;
  color: #fff;
  font-weight: 500;
}
.explanation-box-content {
  margin-left: 2rem;
}
.cost-simulation {
  position: relative; /* CTAボタンを背景画像の上に重ねるための基準位置 */
  aspect-ratio: 1293 / 2048;
  background-color: #F5E9DA;
  background-image: url(../images/img_simulation.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cost-simulation .cost-simulation-btn {
  position: absolute; /* 背景画像（img_simulation.png）最下部に重ねる */
  left: 0;
  right: 0;
  bottom: 0%;
  width: 88%;
  margin: 0 auto;
}
.benefits {
  aspect-ratio: 968 / 2048;
  background-color: #DDEEFF;
  background-image: url(../images/bg_benefits.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --------------------------
  ご利用の流れ（flow）
-------------------------- */
.flow {
  aspect-ratio: 999 / 2432;
  background-color: #FFFFFF;
  background-image: url(../images/bg_flow.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --------------------------
  施工事例（works）
-------------------------- */
.works {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 1854; /* 背景画像（img_works.png）の縦横比に section の高さを合わせる */
  background-color: #F5E9DA;
  background-image: url(../images/img_works.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.works .works-btn {
  position: absolute; /* 背景画像（img_works.png）最下部の余白に重ねる */
  left: 0;
  right: 0;
  bottom: 0%;
  width: 88%;
  margin: 0 auto;
}

/* --------------------------
  施工事例カルーセル
  背景画像（img_works.png）中央の余白ゾーンに重ね、
  複数の works-card をスワイプ／矢印ボタンで横スライドさせる。
-------------------------- */
.works-slider {
  /* このセクションはpx基準で組み、html{font-size:1.32vw}（SP時のrem基準）の
     影響を受けないようにしている（参考画像通りのサイズ感を確実に担保するため） */
  --works-card-radius: 24px;
  --works-card-max-width: 460px;
  --works-color-navy: #1A3C7A;
  --works-color-blue: #019AE6;
  --works-color-orange: #FF7700;
  --works-color-orange-hover: #e96b00;
  --works-color-star: #FFB400;
  --works-color-border-light: #cfe9fb;
  --works-color-bg-blue-pale: #E4F2FF;

  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  max-width: var(--works-card-max-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  /* Swiperのビューポート。左右の隙間分だけ隣のカードが見切れて表示される */
  overflow: hidden;
}

/* --------------------------
  矢印ボタン（btn_prev.png / btn_next.png）
  見切れて表示されるカードの上に重なる位置に配置
-------------------------- */
.works-slider__arrow {
  position: absolute;
  top: 33%;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 4px 10px rgba(26, 60, 122, .3));
  transition: transform .3s;
}

.works-slider__arrow:hover,
.works-slider__arrow:focus-visible {
  transform: translateY(-50%) scale(1.08);
}

.works-slider__arrow--prev {
  left: 2px;
}

.works-slider__arrow--next {
  right: 2px;
}

/* --------------------------
  ドットインジケーター
-------------------------- */
.works-slider__dots.swiper-pagination {
  position: static;
  width: auto;
  left: auto;
  bottom: auto;
  top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* アクティブ時にscale(1.3)で少し大きくなるドットが、親の.works-slider
     （Swiperのビューポートとしてoverflow:hiddenを持つ）ぎりぎりで
     見切れないよう、行の上下に余白を確保しておく */
  padding-block: 4px;
}

.works-slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--works-color-border-light);
  cursor: pointer;
  transition: background-color .3s, transform .3s;
}

.works-slider__dot.is-active {
  background-color: var(--works-color-orange);
  transform: scale(1.3);
}

@media (max-width: 640px) {
  .works-slider__arrow {
    width: 28px;
    height: 28px;
  }
}

.works-card {
  /* SwiperのslidesPerView:'auto' + centeredSlidesで中央寄せしつつ、
     幅を78%にすることで左右に隣のカードが見切れて表示される */
  width: 78%;
  background-color: #fff;
  border-radius: var(--works-card-radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(26, 60, 122, 0.15);
  /* Safariはbox-shadow・角丸を持つ要素のスワイプ中の再描画が重くなりがちなため、
     合成レイヤー化のヒントを与えてカクつきを抑える */
  transform: translateZ(0);
}

.works-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
}

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

.works-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
}

.works-card__voice {
  position: relative;
  background-color: #fff;
  border: 1px solid var(--works-color-border-light);
  border-radius: 14px;
  padding: 6px;
}

.works-card__voice-text {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  /* 文章量が異なってもカードの高さを揃えるため、常に2行分の高さを確保する */
  min-height: 2.8em;
  color: var(--works-color-navy);
  text-align: center;
}

.works-card__voice::before,
.works-card__voice::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

.works-card__voice::before {
  bottom: -9px;
  border-top: 9px solid var(--works-color-border-light);
}

.works-card__voice::after {
  bottom: -7px;
  border-top: 8px solid #fff;
}

.works-card__rating {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.works-card__stars {
  font-size: 18px;
  letter-spacing: .2rem;
  color: var(--works-color-star);
}

.works-card__score {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--works-color-orange);
}

.works-card__customer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.works-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--works-color-bg-blue-pale);
}

.works-card__avatar svg {
  width: 11px;
  height: 11px;
  fill: var(--works-color-blue);
}

.works-card__name {
  font-size: 12px;
  font-weight: 700;
  color: var(--works-color-navy);
}

.works-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.4;
  /* 文章量が異なってもカードの高さを揃えるため、常に1行分の高さを確保する */
  min-height: 1.4em;
  color: var(--works-color-navy);
  text-align: center;
}

.works-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 34px;
  border-radius: 14px;
  background-color: var(--works-color-orange);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .3s, transform .3s;
}

.works-card__cta:hover {
  background-color: var(--works-color-orange-hover);
  transform: translateY(-2px);
}

.works-card__cta-arrow {
  width: 16px;
  height: 16px;
}

/* --------------------------
  施工事例カルーセル（PC表示）
  カード内の余白・フォント・画像比率は固定pxのため、幅が広がるほど
  （92%上限の460pxに達した状態ほど）相対的に縦がつぶれた形になる。
  そこでスマホ実機の基準幅390px（92%=358.8px）でのシルエットをベースに
  固定し、PCのwrapper幅750pxに合わせて拡大率(750÷390≒1.9231)で
  transform:scaleすることで、SPと同じ縦横比のまま一回り大きく見せる。
  transform-originをtop centerにして、top位置（top:17%）と水平中央は
  そのまま、下方向にのみ広がるようにする。
-------------------------- */
@media (min-width: 1024px) {
  .works-slider {
    width: 358.8px;
    max-width: 358.8px;
    transform: translateX(-50%) scale(1.9231);
    transform-origin: top center;
  }
}

@media (max-width: 1023px) {
  html {
    font-size: 1.32vw;
  }

  .final-cta {
    margin-bottom: 0;
  }

  .final-cta2 {
    margin-bottom: clamp(-300px, -40vw, -200px);
  }

  footer {
    margin-top: 0; /* SP表示時はフッターの上マージンを削除 */
  }
}

/* ==========================================================================
   チャット型 無料相談フォーム
   PC：中央モーダル / スマホ：ほぼフルスクリーン
   このセクションはpx基準で組み、html{font-size:1.32vw}（SP時のrem基準）の
   影響を受けないようにしている（ボタン最低48pxなどを確実に担保するため）
   ========================================================================== */

/* --------------------------
  オーバーレイ・モーダル本体
-------------------------- */
.chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(10, 20, 40, 0.55);
  padding: 24px;
  overscroll-behavior: contain;
  touch-action: none; /* 背景（モーダル外）でのスワイプでページがスクロールしないようにする */
}

.chat-overlay[hidden] {
  display: none;
}

.chat-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  height: 85vh;
  height: 85dvh;
  max-height: 760px;
  background-color: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(10, 30, 70, 0.35);
  animation: chatModalIn .25s ease;
}

@keyframes chatModalIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --------------------------
  ヘッダー
-------------------------- */
.chat-modal__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #43A047 0%, #388E3C 100%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
  color: #fff;
  position: relative;
  z-index: 1;
}

.chat-modal__profile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chat-modal__avatar {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.chat-modal__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 28%; /* img_icon.pngは余白が多いため、顔の位置に寄せてトリミング */
  transform: scale(1.6); /* 顔を大きく見せるためズーム */
}

.chat-modal__profile-text {
  min-width: 0;
}

.chat-modal__name {
  margin: 0;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.3;
}

.chat-modal__sub {
  margin: 0;
  font-size: 12px;
  color: #dcf3dc;
  line-height: 1.3;
}

.chat-modal__close {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
}

.chat-modal__close:hover,
.chat-modal__close:focus-visible {
  background-color: rgba(255, 255, 255, .3);
}

/* --------------------------
  会話ログ・吹き出し
-------------------------- */
.chat-modal__log {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y; /* チャットログ内は縦スワイプのみ許可 */
  padding: 16px 14px;
  background: linear-gradient(180deg, #F7FCF6 0%, #EEF8EF 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
  animation: chatBubbleIn .4s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes chatBubbleIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-row--bot {
  justify-content: flex-start;
}

.chat-row--user {
  justify-content: flex-end;
}

.chat-row__avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #d7ecd7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.chat-row__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 28%; /* img_icon.pngは余白が多いため、顔の位置に寄せてトリミング */
  transform: scale(1.6); /* 顔を大きく見せるためズーム */
}

.chat-bubble {
  max-width: 78%;
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.8;
  border-radius: 18px;
  word-break: break-word;
  white-space: pre-wrap;
}

.chat-bubble--bot {
  background-color: #FCFFFC;
  color: #1b4d24;
  border: 1px solid #dcefdc;
  box-shadow: 0 4px 10px rgba(76, 175, 80, .08);
}

.chat-bubble--user {
  background: linear-gradient(135deg, #66bb6a, #43a047);
  color: #fff;
}

/* 中間結果など、少し目立たせたいメッセージ */
.chat-bubble--highlight {
  background: linear-gradient(135deg, #fff6df, #ffedb8);
  border: 1px solid #ffd766;
  color: #7a4b00;
  font-weight: bold;
}

/* サンクスメッセージ内の電話番号強調 */
.chat-bubble__phone {
  color: #1A3C7A;
  font-weight: bold;
}

/* 確認画面カードなど、横幅いっぱいに広げたい吹き出し */
.chat-bubble--wide {
  max-width: 92%;
  width: 92%;
}

/* 入力中インジケーター */
.chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 13px 16px;
}

.chat-typing i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #94c99a;
  animation: chatTyping 1s infinite ease-in-out;
}

.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }

@keyframes chatTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* --------------------------
  入力エリア共通
-------------------------- */
.chat-modal__input {
  flex: 0 0 auto;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background-color: #fff;
  border-top: 1px solid #eaf3ea;
}

/* --------------------------
  選択肢ボタン
-------------------------- */
.chat-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-choice-btn {
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 16px;
  border: 2px solid #bfe3bf;
  background-color: #fff;
  color: #1b4d24;
  font-size: 15px;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}

.chat-choice-btn:hover,
.chat-choice-btn:focus-visible {
  border-color: #ff8a3d;
  background-color: #fff6ee;
  outline: none;
}

.chat-choice-btn:active {
  transform: scale(.98);
}

.chat-choice-btn--primary {
  border-color: #FF8A3D;
  background-color: #FF8A3D;
  color: #fff;
  text-align: center;
  margin-bottom: 4px;
  box-shadow: 0 10px 25px rgba(255, 122, 41, .28);
}

.chat-choice-btn--primary:hover,
.chat-choice-btn--primary:focus-visible {
  background-color: #F97828;
  border-color: #F97828;
}

/* --------------------------
  テキスト入力フォーム
-------------------------- */
.chat-field-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 郵便番号など、記号＋1つの入力を横並びにする行 */
.chat-zip-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-zip-row__mark {
  font-size: 16px;
  font-weight: bold;
  color: #1b4d24;
}

.chat-zip-row input {
  flex: 1;
}

.chat-field__label {
  font-size: 13px;
  font-weight: bold;
  color: #1b4d24;
}

.chat-field__label .chat-required {
  margin-left: 4px;
  color: #FF8A3D;
  font-size: 11px;
}

.chat-field input,
.chat-field select {
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 2px solid #cfe8cf;
  font-size: 16px; /* iOSでの自動ズームを防ぐ */
  color: #1b4d24;
  background-color: #f8fdf8;
}

.chat-field input:focus,
.chat-field select:focus {
  outline: none;
  border-color: #FF8A3D;
  background-color: #fff;
}

.chat-field__note {
  font-size: 11px;
  color: #5f8064;
}

.chat-field__error {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: bold;
  color: #d92b2b;
}

.chat-field--readonly input {
  background-color: #eef5ee;
  color: #3f5f45;
}

.chat-submit-row {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-btn {
  min-height: 48px;
  border-radius: 16px;
  border: none;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}

.chat-btn--primary {
  background-color: #FF8A3D;
  color: #fff;
  margin-bottom: 4px;
  box-shadow: 0 10px 25px rgba(255, 122, 41, .28);
  transition: background-color .15s ease, box-shadow .15s ease;
}

.chat-btn--primary:hover,
.chat-btn--primary:focus-visible {
  background-color: #F97828;
  outline: none;
}

.chat-btn--primary:disabled {
  background: #d3ddd3;
  color: #7c927e;
  box-shadow: none;
  cursor: not-allowed;
}

.chat-btn--secondary {
  background-color: #fff;
  border: 2px solid #bfe3bf;
  color: #1b4d24;
}

/* --------------------------
  確認画面のカード
-------------------------- */
.chat-confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px 2px;
}

.chat-confirm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background-color: #f5faf5;
  border: 1px solid #dcefdc;
  border-radius: 12px;
}

.chat-confirm-row__body {
  min-width: 0;
}

.chat-confirm-row__label {
  margin: 0;
  font-size: 11px;
  color: #5f8064;
}

.chat-confirm-row__value {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: bold;
  color: #1b4d24;
  word-break: break-word;
}

.chat-confirm-row__edit {
  flex: none;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 2px solid #FF8A3D;
  background-color: #fff;
  color: #FF8A3D;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

.chat-confirm-row__edit:hover,
.chat-confirm-row__edit:focus-visible {
  background-color: #fff1e9;
  outline: none;
}

.chat-confirm-note {
  font-size: 12px;
  line-height: 1.7;
  color: #3a4a3a;
}

.chat-privacy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 2px;
  font-size: 12px;
  line-height: 1.6;
  color: #1b4d24;
}

.chat-privacy input {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
}

.chat-privacy a {
  color: #1e7d32;
  text-decoration: underline;
}

/* --------------------------
  レスポンシブ（スマホ：ほぼフルスクリーン）
-------------------------- */
@media (max-width: 640px) {
  .chat-overlay {
    padding: 0;
  }

  .chat-modal {
    max-width: 100%;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }
}

/* --------------------------
  site loader（サイトロード画面）
  画像読み込み中のレイアウト崩れをユーザーに見せないよう、
  読み込み完了まで最前面に表示し、完了後にフェードアウトさせる。
-------------------------- */
html.is-loading,
html.is-loading body {
  height: 100%;
  overflow: hidden; /* 読み込み中はスクロール不可にしてガタつきを隠す */
}

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #F7FCF6 0%, #EEF8EF 100%);
  transition: opacity .5s ease, visibility .5s ease;
}

.site-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.site-loader__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 8px 24px rgba(76, 175, 80, .25);
  animation: siteLoaderBounce 1.6s ease-in-out infinite;
}

.site-loader__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 28%; /* img_icon.pngは余白が多いため、顔の位置に寄せてトリミング */
  transform: scale(1.6);
}

.site-loader__logo {
  margin: 0;
  font-size: 2rem;
  font-weight: bold;
  color: #1A3C7A;
  letter-spacing: .04em;
}

.site-loader__logo span {
  color: #FF8000;
}

.site-loader__dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-loader__dots i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #43A047;
  animation: siteLoaderDots 1s infinite ease-in-out;
}

.site-loader__dots i:nth-child(2) { animation-delay: .15s; }
.site-loader__dots i:nth-child(3) { animation-delay: .3s; }

@keyframes siteLoaderBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes siteLoaderDots {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* 読み込み完了：ロード画面をフェードアウト */
.site-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* サイト本体：読み込み完了までは非表示にしておき、完了後にふわっと表示 */
.wrapper {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}

html.is-loaded .wrapper {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   施工事例詳細モーダル
   「詳細を見る」（data-open-work-modal）押下で開くポップアップ。
   このセクションはpx基準で組み、html{font-size:1.32vw}（SP時のrem基準）の
   影響を受けないようにしている（他モーダル同様、サイズ感を確実に担保するため）
   ========================================================================== */
.works-modal-overlay {
  --wm-navy: #1A3C7A;
  --wm-blue: #019AE6;
  --wm-orange: #FF7700;
  --wm-orange-hover: #e96b00;
  --wm-star: #FFB400;
  --wm-border-light: #CBE8FF;
  --wm-bg-pale: #F8FAFC;
  --wm-bg-blue-pale: #E4F2FF;

  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, .55);
  padding: 24px;
  overscroll-behavior: contain;
}

.works-modal-overlay[hidden] {
  display: none;
}

.works-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 92%;
  max-width: 900px;
  max-height: 90vh;
  max-height: 90dvh;
  overflow: auto;
  background-color: #fff;
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
  animation: worksModalIn .3s ease;
}

@keyframes worksModalIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------
  ×ボタン（写真の右上に浮かせて配置）
-------------------------- */
.works-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .92);
  color: var(--wm-navy);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: background-color .3s, transform .3s;
}

.works-modal__close:hover,
.works-modal__close:focus-visible {
  background-color: #fff;
  transform: scale(1.06);
}

/* --------------------------
  上部写真ギャラリー
  施工事例の写真を横一列に並べ、複数枚ある場合は横スクロールで見る。
-------------------------- */
.works-modal__gallery {
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 9;
  flex: none;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  border-radius: 28px 28px 0 0;
}

.works-modal__gallery img {
  display: block;
  flex: 0 0 88%;
  width: 88%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
}

.works-modal__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 32px 36px;
}

/* --------------------------
  星評価
-------------------------- */
.works-modal__rating {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}

.works-modal__stars {
  font-size: 22px;
  letter-spacing: .2rem;
  color: var(--wm-star);
}

.works-modal__score {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--wm-orange);
}

/* --------------------------
  お客様情報
-------------------------- */
.works-modal__customer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.works-modal__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--wm-bg-blue-pale);
}

.works-modal__avatar svg {
  width: 16px;
  height: 16px;
  fill: var(--wm-blue);
}

.works-modal__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--wm-navy);
}

/* --------------------------
  施工内容タグ
-------------------------- */
.works-modal__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.works-modal__tags:empty {
  display: none;
}

.works-modal__tags li {
  padding: 5px 14px;
  border-radius: 999px;
  background-color: var(--wm-bg-blue-pale);
  color: var(--wm-navy);
  font-size: 12px;
  font-weight: 700;
}

/* --------------------------
  区切り線
-------------------------- */
.works-modal__divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 119, 0, 0) 0%, rgba(255, 119, 0, .3) 50%, rgba(1, 154, 230, 0) 100%);
}

/* --------------------------
  タイトル
-------------------------- */
.works-modal__title {
  margin: 0;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.4;
  color: var(--wm-navy);
  text-align: center;
}

/* --------------------------
  施工内容（カード風）
-------------------------- */
.works-modal__section-label {
  margin: 0 0 -4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--wm-navy);
  text-align: center;
}

.works-modal__specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0;
  padding: 18px;
  background-color: var(--wm-bg-pale);
  border-radius: 16px;
}

.works-modal__spec {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(26, 60, 122, .06);
}

.works-modal__spec-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--wm-bg-blue-pale);
  font-size: 16px;
}

.works-modal__spec dt {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--wm-blue);
}

.works-modal__spec dd {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--wm-navy);
}

/* --------------------------
  お客様コメント（吹き出し）
  works-card__voice の吹き出しデザインを拡張
-------------------------- */
.works-modal__comment {
  position: relative;
  background-color: #fff;
  border: 1px solid var(--wm-border-light);
  border-radius: 16px;
  padding: 20px 22px;
}

.works-modal__comment::before,
.works-modal__comment::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.works-modal__comment::before {
  top: -11px;
  border-bottom: 11px solid var(--wm-border-light);
}

.works-modal__comment::after {
  top: -9px;
  border-bottom: 10px solid #fff;
}

.works-modal__comment-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--wm-navy);
  text-align: center;
}

/* --------------------------
  担当スタッフより
-------------------------- */
.works-modal__staff {
  background-color: var(--wm-bg-pale);
  border-radius: 16px;
  padding: 18px 20px;
}

.works-modal__staff-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--wm-navy);
}

/* --------------------------
  閉じるボタン
-------------------------- */
.works-modal__footer {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.works-modal__close-btn {
  width: 260px;
  height: 56px;
  border: none;
  border-radius: 999px;
  background-color: var(--wm-orange);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .3s, transform .3s;
}

.works-modal__close-btn:hover,
.works-modal__close-btn:focus-visible {
  background-color: var(--wm-orange-hover);
  transform: translateY(-2px);
}

/* --------------------------
  レスポンシブ（スマホ：全て縦並び）
-------------------------- */
@media (max-width: 640px) {
  .works-modal-overlay {
    padding: 16px;
  }

  .works-modal__body {
    padding: 22px 18px 28px;
    gap: 16px;
  }

  .works-modal__title {
    font-size: 24px;
  }

  .works-modal__specs {
    grid-template-columns: 1fr;
  }

  .works-modal__close-btn {
    width: 100%;
    max-width: 260px;
  }
}

/* アニメーションを抑えたい環境への配慮 */
@media (prefers-reduced-motion: reduce) {
  .chat-modal,
  .works-modal,
  .chat-row,
  .chat-typing i {
    animation: none !important;
  }

  .nayami-sozai {
    animation: none !important;
    opacity: 1 !important;
  }

  .site-loader,
  .site-loader__logo,
  .site-loader__avatar,
  .site-loader__dots i {
    animation: none !important;
    transition: none !important;
  }

  .wrapper {
    transition: none !important;
  }
}