/* ==========================================================================
   TOPページ固有
   ========================================================================== */

/* --------------------------------------------------------------------------
   MV（#slideshow は本番でCMSスライダーに差し替え）
   -------------------------------------------------------------------------- */
.tjs-mv {
  position: relative;
  overflow: hidden;
  background: #EAF4FC;
}
#slideshow {
  position: absolute;
  inset: 0;
  height: 100%;
  overflow: hidden;
}
#slideshow .swiper-slide,
#slideshow .main_slider__inner {
  width: 100%;
  height: 100%;
}
#slideshow picture {
  display: block;
  width: 100%;
  height: 100%;
}
#slideshow img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.tjs-mv__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .88) 38%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}
.tjs-mv__inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: clamp(560px, 46vw, 760px);
  display: flex;
  align-items: center;
}
/* リード文を枠幅基準（cqi）で縮めるため、コンテナに指定 */
.tjs-mv__box {
  container-type: inline-size;
  width: min(600px, 52%);
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 56px 0;
}
.tjs-mv__text {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.tjs-mv__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tjs-mv__badge {
  background: #fff;
  border: 1px solid #DCE5EF;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
  color: #0B5AA6;
  box-shadow: 0 2px 8px rgba(11, 90, 166, .08);
}
.tjs-mv__title {
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .03em;
  color: #13253A;
  text-wrap: pretty;
}
/* 2行固定：最長の1行目（37文字＋字間0.05em ≒ 39.5em）が枠幅に収まるサイズにする */
.tjs-mv__lead {
  font-size: min(clamp(15px, 1.3vw, 17px), calc(100cqi / 39.5));
  line-height: 2;
  color: #1C2B3A;
  font-weight: 500;
}
.tjs-mv__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* ボタン下：対応内容の丸写真（4カラム）。PCはテキスト枠より右へ120px広げて一回り大きく表示 */
.tjs-mv__points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 170px));
  width: calc(100% + 120px);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tjs-mv__point {
  position: relative;
  padding-bottom: 14px;
}
.tjs-mv__point-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 6px 18px rgba(11, 90, 166, .18);
}
.tjs-mv__point-label {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #DCE5EF;
  border-radius: 999px;
  /* 「イタチ・コウモリの駆除」（11文字）を1行で収めるため、左右余白・字間を詰める */
  padding: 4px 8px;
  font-size: 1.3rem;
  letter-spacing: 0;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: #0B5AA6;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(11, 90, 166, .12);
}

@media (max-width: 1100px) {
  #slideshow {
    position: relative;
    inset: auto;
    height: 75vw;
  }
  #slideshow img {
    object-position: 78% center;
  }
  .tjs-mv__overlay {
    display: none;
  }
  .tjs-mv__inner {
    display: block;
    min-height: 0;
    margin-top: -40px;
    padding: 0 16px 48px;
  }
  .tjs-mv__box {
    width: 100%;
    background: #fff;
    border-radius: 20px;
    padding: 28px 22px;
    gap: 22px;
    box-shadow: 0 10px 30px rgba(11, 90, 166, .12);
  }
  /* 白ボックス内に収める */
  .tjs-mv__points {
    width: auto;
  }
}
/* SP：縦長画像（mv-sp.png 941×1672）に切替。比率そのままで全体を表示 */
@media (max-width: 767px) {
  #slideshow {
    height: auto;
    aspect-ratio: 941 / 1672;
  }
  #slideshow img {
    object-position: center;
  }
  /* 上部の空に文字が乗るよう、うっすら白グラデーションを重ねる */
  .tjs-mv__overlay {
    display: block;
    background: linear-gradient(180deg, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, .45) 30%, rgba(255, 255, 255, 0) 50%);
  }
  .tjs-mv__inner {
    position: static;
    margin-top: 0;
    padding: 24px 16px 48px;
  }
  /* 枠なし：白ボックスの装飾を解除 */
  .tjs-mv__box {
    background: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  /* キャッチ・リードはMV画像の上部に重ねる（ボタンは画像の下） */
  .tjs-mv__text {
    position: absolute;
    top: 24px;
    left: 16px;
    right: 16px;
    z-index: 1;
    gap: 16px;
  }
  /* バッジ3つを横一列に収める（375px幅で約11px） */
  .tjs-mv__badges {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .tjs-mv__badge {
    flex-shrink: 0;
    padding: 5px 8px;
    font-size: clamp(9px, 2.9vw, 12px);
    letter-spacing: 0;
    white-space: nowrap;
  }
  .tjs-mv__title {
    font-size: clamp(24px, 7vw, 30px);
    text-shadow: 0 0 12px rgba(255, 255, 255, .9);
  }
  .tjs-mv__lead {
    /* SPは4行（切りのいい位置で .tjs-br-sp 改行）。最長の1行目（22文字）が収まるので通常サイズ */
    font-size: 1.4rem;
    line-height: 1.8;
    text-shadow: 0 0 8px rgba(255, 255, 255, .95), 0 0 2px rgba(255, 255, 255, .95);
  }
  /* ボタン2つを縦積み・中央配置。列幅を広い方（電話ボタン）に合わせ、両方を同じ横幅にする */
  .tjs-mv__btns {
    display: grid;
    grid-template-columns: minmax(0, max-content);
    justify-content: center;
    gap: 12px;
  }
  .tjs-mv__btns > a {
    justify-content: center;
  }
  /* 丸写真はMV画像の下部に重ねる（画像の高さ＝100vw×1672/941 の位置から、自身の高さ＋20px 上へ）。SPは2カラム×2段・中央寄せ */
  .tjs-mv__points {
    position: absolute;
    top: calc(100vw * 1672 / 941);
    left: 16px;
    right: 16px;
    z-index: 1;
    transform: translateY(calc(-100% - 20px));
    grid-template-columns: repeat(2, minmax(0, 24vw));
    justify-content: center;
    gap: 10px 24px;
  }
  .tjs-mv__point-img {
    border-width: 3px;
  }
  .tjs-mv__point-label {
    padding: 3px 5px;
    font-size: clamp(9px, 2.6vw, 11px);
    letter-spacing: 0;
  }
}

/* --------------------------------------------------------------------------
   事業紹介カード
   -------------------------------------------------------------------------- */
.tjs-svc-card {
  display: flex;
  flex-direction: column;
  color: #1C2B3A;
  text-decoration: none;
  background: #fff;
  border: 1px solid #DCE5EF;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(11, 90, 166, .06);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.tjs-svc-card:hover {
  opacity: 1;
  color: #1C2B3A;
  border-color: #f3c5c7;
  box-shadow: 0 8px 24px rgba(11, 90, 166, .12);
}
.tjs-svc-card__img {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #E3EBF4;
}
.tjs-svc-card__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.tjs-svc-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.tjs-svc-card:hover .tjs-svc-card__photo img {
  transform: scale(1.03);
}
.tjs-svc-card__icon {
  position: absolute;
  right: 16px;
  bottom: -34px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(11, 90, 166, .15);
}
.tjs-svc-card__body {
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.tjs-svc-card__en {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: .14em;
  color: #0B5AA6;
}
.tjs-svc-card__title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  transition: color .3s ease;
}
.tjs-svc-card:hover .tjs-svc-card__title {
  color: #0B5AA6;
}
.tjs-svc-card__text {
  font-size: 1.4rem;
  line-height: 1.9;
  color: #33445A;
  flex: 1;
}
.tjs-svc-card__more {
  align-self: flex-start;
  font-weight: 700;
  font-size: 1.4rem;
  color: #0B5AA6;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tjs-svc-card__more-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #0B5AA6;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  transition: transform .3s ease;
}
.tjs-svc-card:hover .tjs-svc-card__more-arrow {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   選ばれる理由
   -------------------------------------------------------------------------- */
.tjs-reason {
  background: #fff;
  color: #1C2B3A;
  border-radius: 16px;
  padding: 32px 32px 30px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.tjs-reason__side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.tjs-reason__num {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 4rem;
  color: #0B5AA6;
  line-height: 1;
}
.tjs-reason__icon {
  width: 88px;
  height: 88px;
  object-fit: contain;
  display: block;
}
.tjs-reason__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tjs-reason__title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  color: #0B5AA6;
}
.tjs-reason__text {
  font-size: 1.4rem;
  line-height: 1.95;
  color: #33445A;
}

/* --------------------------------------------------------------------------
   お客様の声
   -------------------------------------------------------------------------- */
.tjs-voice {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tjs-voice__bubble {
  position: relative;
  background: #FBEBEC;
  border-radius: 16px;
  padding: 28px 28px 30px;
  flex: 1;
}
.tjs-voice__bubble::after {
  content: "";
  position: absolute;
  left: 128px;
  bottom: -12px;
  width: 24px;
  height: 24px;
  background: #FBEBEC;
  transform: rotate(45deg);
}
.tjs-voice__cat {
  display: inline-block;
  background: #fff;
  color: #0B5AA6;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.tjs-voice__text {
  font-size: 1.5rem;
  line-height: 2;
  color: #1C2B3A;
}
.tjs-voice__person {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding-left: 12px;
  margin-top: -8px;
}
.tjs-voice__avatar {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  object-fit: contain;
  object-position: center bottom;
}
.tjs-voice__name {
  font-size: 1.4rem;
  font-weight: 700;
  padding-bottom: 14px;
}

/* --------------------------------------------------------------------------
   対応エリア
   -------------------------------------------------------------------------- */
.tjs-area {
  background-color: #EEF6FC;
  background-image: url("https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28707/bg-area.png");
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
}
.tjs-area__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.tjs-area__body {
  flex: 1 1 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tjs-area__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tjs-area__item {
  background: #fff;
  border-radius: 12px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid #DCE5EF;
}
.tjs-area__item--main {
  border: 2px solid #0B5AA6;
}
.tjs-area__badge {
  flex-shrink: 0;
  background: #bdc733;
  color: #1C2B3A;
  font-size: 1.3rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
}
.tjs-area__item--main .tjs-area__badge {
  background: #0B5AA6;
  color: #fff;
}
.tjs-area__place {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tjs-area__name {
  font-size: 2rem;
  font-weight: 700;
}
.tjs-area__item--main .tjs-area__name {
  font-size: 2.2rem;
  color: #0B5AA6;
}
.tjs-area__note {
  font-size: 1.3rem;
  color: #4A5B6E;
  line-height: 1.7;
}
.tjs-area__map {
  flex: 1 1 380px;
  min-width: 0;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(11, 90, 166, .18));
}

/* --------------------------------------------------------------------------
   リフォームバナー
   -------------------------------------------------------------------------- */
.tjs-reform {
  display: flex;
  flex-wrap: wrap;
  border-radius: 20px;
  overflow: hidden;
  color: #1C2B3A;
  text-decoration: none;
  border: 2px solid #bdc733;
  background: #fff;
}
.tjs-reform:hover {
  opacity: 1;
  color: #1C2B3A;
}
.tjs-reform__img {
  flex: 1 1 320px;
  min-height: 240px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity .3s ease;
}
.tjs-reform__body {
  flex: 1 1 420px;
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}
.tjs-reform__en {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: .2em;
  color: #0B5AA6;
}
.tjs-reform__title {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1.5;
}
.tjs-reform__text {
  font-size: 1.4rem;
  line-height: 1.9;
  color: #33445A;
}
.tjs-reform__btn {
  align-self: flex-start;
  transition: background .3s ease;
}
.tjs-reform:hover .tjs-reform__btn {
  background: #083F75;
}

/* 選ばれる理由：SPは数字＋アイコンを上に横並び、小見出し・説明文をその下に全幅で */
@media (max-width: 767px) {
  .tjs-reason {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 24px 20px;
  }
  .tjs-reason__side {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }
  .tjs-reason__icon {
    width: 72px;
    height: 72px;
  }
  .tjs-reason__title {
    text-align: center;
    font-size: 1.8rem;
  }
}