@charset "UTF-8";

/* ===============================
   Reset / Base
================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #222;
  background-color: #e8edf3;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

a {
  -webkit-tap-highlight-color: transparent;
}

/* コンテンツ幅: モバイルファースト / 650pxで固定・中央寄せ */
.wrapper {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.12);
}

/* ボタン共通(画像リンク) */
.btn,
.header__tel {
  display: block;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.btn:hover,
.header__tel:hover {
  opacity: 0.85;
}

.btn:active,
.header__tel:active {
  transform: scale(0.97);
}

/* ===============================
   Header
================================ */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5%;
  padding: 2.2% 2.8%;
  background-color: #fff;
}

.header__logo {
  width: 28%;
}

.header__cards {
  width: 30%;
}

.header__tel {
  width: 26%;
}

/* ===============================
   ファーストビュー
================================ */
.fv__bottom {
  display: grid;
  gap: 4.2%;
  padding: 0 4.2% 6%;
  /* mv.png下端の背景色と同色 */
  background-color: #c5f1fd;
}

/* コールセンター満足度バナー: 角丸+濃い青の境界線(画像内の見出しと同じ青)。
   太さ・半径はカード画像の枠に合わせて表示幅に応じて拡縮 */
.fv__rating {
  margin-bottom: 1em;
  border: clamp(2px, 0.46vw, 3px) solid #0140a9;
  border-radius: clamp(9px, 2.2vw, 14.5px);
}

/* ===============================
   画像セクション
================================ */
.section img {
  vertical-align: bottom;
}

/* WEB割キャンペーン: 上下左右に1emの余白(画像背景の水色と同色) */
.section--campaign {
  padding: 1em;
  background-color: #e3f8fc;
}

/* 導入企業: 画像が全面デザインのため余白なし。画像端に近い水色を背景にして、拡縮時のすき間を目立たせない */
.section--clients {
  background-color: #c0e5fc;
}

/* お問合せ訴求: 上下に青いライン(FVの文字と同じ縦グラデ+光彩) */
.section--inquiry::before,
.section--inquiry::after {
  content: "";
  display: block;
  height: 5px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 68%),
    linear-gradient(180deg, #3ba2f6 0%, #1764de 55%, #0c46b8 100%);
  box-shadow: 0 0 8px rgba(59, 162, 246, 0.55);
}

/* お客様の声: 上下に白の余白 */
.section--voice {
  padding: 2em 0;
  background-color: #fff;
}

/* 雨漏り緊急訴求: 上下に2emの余白。
   画像はごく薄い縦グラデーションのため、上の余白は画像上端(#fdfde6)、
   下の余白は画像下端(#fdfdd7)と同じ色にする(境目は画像の裏に隠れる) */
.section--urgent {
  padding: 2em 0;
  background: linear-gradient(180deg, #fdfde6 50%, #fdfdd7 50%);
}

/* 画像とボタンの重ね合わせ基準(ボタンの位置は画像に対する比率で決める) */
.urgent__inner {
  position: relative;
}

/* 位置・幅は section_10.png に対する比率(元デザインの btn_2 の配置に合わせた値) */
.urgent__btn {
  position: absolute;
  left: 2.3%;
  bottom: 2.8%;
  width: 95.7%;
}

/* 対応エリア・お申し込みの流れ: 画像に余白込みのため追加の余白なし。
   画像端と同色の背景で、拡縮時のすき間を目立たせない */
.section--area {
  background-color: #e7f6fd;
}

.section--flow {
  background-color: #0261da;
}

/* 料金表: 下に2emの余白(画像下端の水色と同色) */
.section--price {
  padding-bottom: 2em;
  background-color: #f6fbfe;
}

/* ===============================
   施工事例
================================ */
.works {
  padding: 10% 0 12%;
  background-color: #ededed;
}

.works__title {
  margin-bottom: 5.5%;
  font-size: clamp(38px, 9.2vw, 60px);
  font-weight: 900;
  letter-spacing: 0.15em;
  text-indent: 0.15em;
  color: #0024a8;
  text-align: center;
}

/* タイトル下の青いアクセントライン */
.works__title::after {
  content: "";
  display: block;
  width: 80%;
  height: 2px;
  margin: 2.5% auto 0;
  background-color: #0024a8;
}

.works__subtitle {
  padding: 4% 0;
  text-align: center;
}

.works__subtitle img {
  display: block;
  width: 86%;
  max-width: 560px;
  margin: 0 auto;
}

.works__badge {
  width: fit-content;
  margin: 5% auto 3%;
  padding: 6px 34px;
  border-radius: 999px;
  background-color: #0068fe;
  font-size: clamp(17px, 4.6vw, 21px);
  font-weight: 700;
  color: #fff;
}

/* --- スライダー --- */
.works__slider-wrap {
  position: relative;
}

/* スライド間の余白(デザイン: カード間の間隔 約50px の半分) */
.works-slide {
  padding: 0 24px;
}

.works-card {
  padding: 24px 18px 20px;
  border-radius: 14px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.works-card__block {
  position: relative;
}

.works-card__label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 7px 30px 7px 16px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  font-size: clamp(15px, 4.2vw, 19px);
  font-weight: 700;
  color: #fff;
}

.works-card__label--before {
  background-color: #0060f5;
}

.works-card__label--after {
  background-color: #fe7404;
}

.works-card__photo {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border-radius: 8px;
  background-color: #e0e0e0;
}

.works-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.works-card__placeholder {
  font-size: clamp(13px, 3.6vw, 16px);
  color: #7e7e7e;
  text-align: center;
}

.works-card__placeholder::before {
  content: "";
  display: block;
  width: 52px;
  height: 44px;
  margin: 0 auto 10px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%237e7e7e" stroke-width="1.4"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="1.8"/><path d="M3 17l5-4 4 3 4-4 5 5"/></svg>') center / contain no-repeat;
}

/* Before→After の下向き矢印(デザイン: 幅広で平たい三角) */
.works-card__arrow {
  width: 0;
  height: 0;
  margin: 14px auto;
  border-right: 45px solid transparent;
  border-left: 45px solid transparent;
  border-top: 19px solid #0068fe;
}

/* 左右の矢印ボタン */
.works__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.works__arrow:hover {
  opacity: 0.8;
}

.works__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border-top: 3px solid #0068fe;
  border-right: 3px solid #0068fe;
}

.works__arrow--prev {
  left: 5.5%;
}

.works__arrow--prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}

.works__arrow--next {
  right: 5.5%;
}

.works__arrow--next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

/* ドット */
.works__dots .slick-dots {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin: 22px 0 26px;
  padding: 0;
  list-style: none;
}

.works__dots .slick-dots li {
  line-height: 0;
}

.works__dots .slick-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  overflow: hidden;
  border: none;
  border-radius: 50%;
  background-color: #c8c7c7;
  text-indent: -9999px;
  cursor: pointer;
}

.works__dots .slick-dots li.slick-active button {
  background-color: #0068fe;
}

/* キャプション(JSで現在のスライドと同期) */
.works__caption-title {
  margin-bottom: 2%;
  font-size: clamp(19px, 5.2vw, 25px);
  font-weight: 700;
  color: #0024a8;
  text-align: center;
}

.works__caption-text {
  font-size: clamp(15px, 4.2vw, 19px);
  line-height: 1.8;
  text-align: center;
}

/* 幅が狭い端末ではスライド間の余白を詰める */
@media (max-width: 480px) {
  .works-slide {
    padding: 0 14px;
  }

  .works-card {
    padding: 16px 12px 14px;
  }
}

/* ===============================
   お問い合わせ
================================ */
.contact {
  padding: 12% 5% 13%;
  background-color: #faf6ec;
}

.contact__title {
  margin-bottom: 14px;
  font-size: clamp(30px, 9vw, 44px);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #111;
  text-align: center;
}

.contact__title span {
  position: relative;
  display: inline-block;
  padding: 0 0.9em;
}

.contact__title span::before,
.contact__title span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.45em;
  height: 0.1em;
  border-radius: 999px;
  background-color: #f0b32c;
}

.contact__title span::before {
  left: 0;
  transform: translateY(-50%) rotate(55deg);
}

.contact__title span::after {
  right: 0;
  transform: translateY(-50%) rotate(-55deg);
}

.contact__badge {
  width: fit-content;
  margin: 0 auto 22px;
  padding: 6px 30px;
  border-radius: 999px;
  background-color: #f0b32c;
  font-size: clamp(16px, 4.6vw, 22px);
  font-weight: 700;
  color: #111;
}

/* リード・注記: <br>で指定した行(最長25文字)が狭い端末で途中折り返ししないよう、
   内容幅(ビューポートの90%)に合わせて文字サイズを縮める */
.contact__lead {
  margin-bottom: 26px;
  font-size: clamp(12px, 3.5vw, 16px);
  text-align: center;
}

.contact__divider {
  margin-bottom: 26px;
  border: none;
  border-top: 2px dashed #dfc75e;
}

.contact__note {
  margin-bottom: 22px;
  font-size: clamp(12px, 3.5vw, 16px);
  text-align: center;
}

/* --- フォーム --- */
.form {
  padding: 7% 5.5% 8%;
  border-radius: 16px;
  background-color: #fff;
}

.form__group {
  margin-bottom: 24px;
}

.form__label,
.form__legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: clamp(16px, 4.3vw, 19px);
  font-weight: 700;
}

.form__fieldset {
  border: none;
}

.required {
  padding: 3px 10px;
  border-radius: 4px;
  background-color: #d43a2a;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}

.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form select,
.form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #dccfae;
  border-radius: 8px;
  background-color: #fff;
  font-family: inherit;
  font-size: 16px;
  color: #222;
}

.form ::placeholder {
  color: #bdb198;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: #f0b32c;
  box-shadow: 0 0 0 3px rgba(240, 179, 44, 0.25);
}

/* セレクト(矢印を自前描画) */
.form__select {
  position: relative;
}

.form__select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
}

.form__select select:invalid {
  color: #bdb198;
}

.form__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* チェックボックス・ラジオ */
.form__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(16px, 4vw, 17px);
  cursor: pointer;
}

.choice input[type="checkbox"],
.choice input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: #ef8200;
  cursor: pointer;
}

.form textarea {
  min-height: 150px;
  resize: vertical;
}

/* 送信ボタン */
.form__submit {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 20px 48px 20px 34px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #3fae3a 0%, #2b9128 100%);
  box-shadow: 0 4px 10px rgba(43, 145, 40, 0.35);
  font-family: inherit;
  font-size: clamp(20px, 5.5vw, 26px);
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: filter 0.25s ease, transform 0.25s ease;
}

.form__submit::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  width: 11px;
  height: 11px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

.form__submit:hover {
  filter: brightness(1.08);
}

.form__submit:active {
  transform: scale(0.98);
}

/* バリデーションエラー */
.form .is-error {
  border-color: #d43a2a;
  background-color: #fdf3f2;
}

.form__error {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #d43a2a;
}

/* 送信完了メッセージ */
.form__done {
  padding: 12% 6%;
  border-radius: 16px;
  background-color: #fff;
  text-align: center;
}

.form__done-title {
  margin-bottom: 14px;
  font-size: clamp(20px, 5.2vw, 24px);
  font-weight: 700;
  color: #2b9128;
}

.form__done-text {
  font-size: 16px;
}

.form__done-text a {
  font-weight: 700;
  color: #d4342a;
}

/* ===============================
   確認・完了ページ(confirm.php / thanks.php)
================================ */
.confirm {
  margin-bottom: 26px;
}

.confirm__row {
  padding: 16px 4px;
  border-bottom: 1px solid #dccfae;
}

.confirm__row:first-child {
  padding-top: 4px;
}

.confirm__row dt {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
}

.confirm__row dd {
  margin: 0;
  font-size: 16px;
  overflow-wrap: break-word;
}

/* 入力画面に戻るボタン */
.confirm__back {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #dccfae;
  border-radius: 999px;
  background-color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #555;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.confirm__back:hover {
  background-color: #faf6ec;
}

/* サーバー側バリデーションエラーの一覧 */
.confirm-errors {
  margin-bottom: 10px;
  padding-left: 1.4em;
}

.confirm-errors li {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 700;
  color: #d43a2a;
}

/* トップに戻るボタン */
.btn-top {
  display: block;
  width: fit-content;
  margin: 26px auto 0;
  padding: 14px 44px;
  border-radius: 999px;
  background-color: #0068fe;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.btn-top:hover {
  opacity: 0.85;
}

/* ===============================
   Footer
================================ */
.footer {
  padding: 18px 10px;
  background-color: #0068fe;
  font-size: 12px;
  color: #fff;
  text-align: center;
}