/* oyamashokai.net - phần BỔ SUNG cho bản React của bộ thiết kế (nạp sau oyama.css). Bản gốc dùng jQuery/owl-carousel/fancybox; ở đây thay bằng component React
   nên cần thêm vài lớp: slider xếp chồng, nút <button> thay cho <div>, thông báo form, hộp xem ảnh, nội dung soạn bằng trình soạn thảo (bảng, danh sách). */

/* ---------- tiện ích ---------- */
.sr-only{
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link:focus{
  position: fixed !important; left: 12px; top: 12px; z-index: 100000;
  width: auto; height: auto; margin: 0; clip: auto; padding: 10px 16px;
  background: #fff; color: var(--secondary-color); font-weight: 700; border-radius: 4px;
}
/* Chữ bật/tắt theo trạng thái (form, nút sao chép): luôn có sẵn trong HTML để Google Dịch dịch được, chỉ ẩn kiểu "chỉ trình đọc màn hình". */
.gt-off{
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Trang không được tràn ngang (clip, không hidden: hidden làm body thành hộp cuộn riêng và hỏng thanh dính). */
html, body{ overflow-x: clip; }
.boxed_wrapper{ overflow-x: clip; }

/* Nút <button> thay cho <div> của bản gốc: bỏ kiểu mặc định của trình duyệt. */
.mobile-nav-toggler,
.mobile-menu .close-btn,
.mobile-menu .navigation li.dropdown .dropdown-btn,
.scroll-to-top{
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}
/* Nút slider: chỉ bỏ nền/viền (cỡ chữ, màu, font số 01/02/03 lấy từ style.css). Bản gốc owl.css cho <span class="flaticon-..."> dùng font biểu tượng. */
.banner-style-two .owl-nav button,
.banner-style-two .owl-dots button{
  background: none;
  border: 0;
  padding: 0;
}
.banner-style-two .owl-nav span[class*="flaticon-"]::before{
  font-family: flaticon_metallic !important;
  font-style: normal;
  font-weight: normal !important;
  line-height: 1;
}
.mobile-menu .close-btn{ color: #fff; }
.scroll-to-top{ border-radius: 50%; }
.scroll-to-top .scroll-top-inner path{ transition: stroke-dashoffset 10ms linear; }

/* ---------- Banner: các slide xếp chồng trong 1 ô lưới (chiều cao = slide cao nhất, không absolute) ---------- */
.banner-style-two .kv-slides{
  position: relative;
  display: grid;
}
.banner-style-two .kv-slide{
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1000ms ease, visibility 0s linear 1000ms;
}
.banner-style-two .kv-slide.active{
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transition: opacity 1000ms ease, visibility 0s;
}
.banner-style-two .owl-nav,
.banner-style-two .owl-dots{ z-index: 3; }
.banner-style-two .owl-dots button{ cursor: pointer; }
.banner-style-two .owl-nav button{ line-height: 56px; }

/* ---------- Tiêu đề trang trong: <h1> trong .sec-title mang đúng kiểu .sec-title h2 của thiết kế ---------- */
.sec-title h1{
  display: block;
  font-size: 42px;
  line-height: 1.35;
  margin: 0;
}
.sec-title h1 span{ font-weight: 700; color: var(--theme-color); }
.sec-title.light h1{ color: #fff; }
@media (max-width: 1199px){ .sec-title h1{ font-size: 36px; } }
@media (max-width: 767px){ .sec-title h1{ font-size: 28px; } }

/* ---------- Thanh menu dính khi cuộn ---------- */
.sticky-header .kv-sticky-brand{ display: none; }
@media only screen and (max-width: 1200px){
  /* responsive.css của mẫu ẩn thanh dính (display:none !important) -> trên mobile cuộn xuống là mất menu. Hiện lại dạng gọn: logo + tên, 無料査定, nút menu. */
  .main-header .sticky-header{ display: block !important; }
  .main-header .sticky-header .outer-box{
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 8px 0;
  }
  .sticky-header .kv-sticky-brand{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-right: auto;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
  }
  .sticky-header .kv-sticky-brand img{
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    padding: 3px;
    object-fit: contain;
  }
  .sticky-header .kv-sticky-brand span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sticky-header .menu-area{ order: 3; }
  .sticky-header .menu-right-content{ order: 2; margin: 0; }
  .sticky-header .menu-area .mobile-nav-toggler{ display: block; padding: 10px; }
}
@media only screen and (max-width: 499px){
  .sticky-header .menu-right-content{ display: none; }
}

/* ---------- Menu mobile ---------- */
.mobile-menu .menu-box{ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.mobile-menu .navigation li.dropdown .dropdown-btn{ cursor: pointer; }
.sticky-header .mobile-nav-toggler{ margin: 0; }
.lang-flags .lang-code{
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: #fff; color: var(--secondary-color);
  font-size: 10px; font-weight: 700;
}

/* ---------- Form 査定依頼 ---------- */
.contact-oyama .form-group.is-invalid input,
.contact-oyama .form-group.is-invalid textarea{
  box-shadow: inset 0 0 0 2px #e05a4f;
}
.contact-oyama .field-err{
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #ffb4ab;
}
.contact-page .contact-oyama .field-err{ color: #c0392b; }
.contact-oyama .form-msgs:focus{ outline: none; }
.contact-oyama .form-alert{
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 4px;
  background: #fdecea;
  color: #8a1f17;
  font-size: 14px;
  line-height: 1.6;
}
.contact-oyama .form-alert a{ color: inherit; font-weight: 700; text-decoration: underline; }
.contact-oyama .form-done{
  margin: 0 0 14px;
  padding: 12px 16px;
  border-radius: 4px;
  background: #e5f5ec;
  color: #0b5c2e;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
}
.contact-oyama .message-btn button[disabled]{ opacity: .7; cursor: wait; }
.recaptcha-note{
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.6;
  opacity: .8;
}
.recaptcha-note a{ text-decoration: underline; }
.grecaptcha-badge{ visibility: hidden; }

/* ---------- Nội dung soạn bằng trình soạn thảo (giới thiệu, dịch vụ, tin, chính sách) ---------- */
.kv-rich h3,
.article-content h3{
  font-size: 21px;
  line-height: 1.5;
  margin: 36px 0 14px;
  color: var(--title-color);
}
.kv-rich h4,
.article-content h4{
  font-size: 18px;
  line-height: 1.5;
  margin: 26px 0 10px;
  color: var(--title-color);
}
.article-content ul,
.article-content ol{
  margin: 0 0 1.3em;
  padding-left: 1.4em;
}
.article-content ul{ list-style: disc; }
.article-content ol{ list-style: decimal; }
.article-content li{ margin-bottom: .35em; }
/* Ảnh trong nội dung: ảnh công trình chụp dọc (750x1000) không được cao quá màn hình. */
.article-content img{
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 560px;
  margin: 18px auto;
  border-radius: 6px;
}
.article-content .article-gallery img{ max-height: none; margin: 0; width: 100%; }
.article-content a{ color: var(--theme-color); text-decoration: underline; text-underline-offset: 3px; }
.article-content .tbl-wrap,
.article-content .table-wrap{
  overflow-x: auto;
  margin: 0 0 1.6em;
  -webkit-overflow-scrolling: touch;
}
/* Bảng trong nội dung = kiểu bảng "会社データ" của thiết kế. */
.article-content table{
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--secondary-color);
}
.article-content table th,
.article-content table td{
  padding: 16px 20px;
  border-bottom: 1px solid #dbe4de;
  vertical-align: top;
  text-align: left;
  font-size: 15px;
  line-height: 1.85;
}
.article-content table th{
  width: 190px;
  background: #f3f7f4;
  color: var(--title-color);
  font-weight: 700;
}
.article-content table ul{ margin: 0; padding: 0; list-style: none; }
.article-content table li{ position: relative; padding-left: 16px; margin: 0; }
.article-content table li::before{
  content: '';
  position: absolute;
  left: 0;
  top: .85em;
  width: 6px;
  height: 6px;
  background: var(--theme-color);
}
.article-content blockquote p + p{
  margin-top: 6px;
  font-size: 14px;
  font-weight: 400;
  color: #7fd6a2;
}
@media (max-width: 767px){
  .article-content table th,
  .article-content table td{ padding: 12px 14px; font-size: 14px; }
  .article-content table th{ width: 110px; }
  .kv-rich h3, .article-content h3{ font-size: 18px; }
}

.article-content .article-gallery{ margin-top: 30px; }
.share-copy{ cursor: pointer; }
.share-copy.is-copied{ color: var(--theme-color); }
.kv-narrow{ max-width: 900px; margin: 0 auto; }

/* ---------- Hộp xem ảnh (thay fancybox) ---------- */
.kv-lightbox{
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 70px;
  background: rgba(10, 24, 16, .92);
}
.kv-lightbox img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.kv-lightbox button{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: background .2s ease;
}
.kv-lightbox button:hover{ background: var(--theme-color); }
.kv-lightbox__close{ top: 14px; right: 14px; }
.kv-lightbox__nav.prev{ left: 12px; top: 50%; transform: translateY(-50%); }
.kv-lightbox__nav.next{ right: 12px; top: 50%; transform: translateY(-50%); }
.kv-lightbox__count{
  position: absolute;
  bottom: 16px;
  left: 0; right: 0;
  margin: 0;
  text-align: center;
  color: #cfe0d6;
  font-size: 14px;
}
@media (max-width: 767px){
  .kv-lightbox{ padding: 60px 12px; }
  .kv-lightbox__nav{ top: auto !important; bottom: 10px; transform: none !important; }
}

/* ---------- 404 ---------- */
.kv-notfound{ padding: 120px 0; text-align: center; }
.kv-notfound__code{ margin: 0; font-family: var(--title-font); font-size: 110px; line-height: 1; font-weight: 700; color: var(--theme-color); }
.kv-notfound h1{ margin: 16px 0 10px; font-size: 32px; }
.kv-notfound__btns{ display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }

/* ---------- Google Dịch: ẩn thanh banner (đẩy body xuống 40px), tooltip, vòng "đang dịch" - như kinglube-com-vn / ketnoiviet-net ---------- */
.skiptranslate iframe,
iframe.skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-aZ2wEe-OiiCO{
  display: none !important;
}
body{ top: 0 !important; }
/* Bản dịch (Google gắn lớp translated-ltr vào <html>) dài hơn tiếng Nhật: tên công ty ở đầu trang chỉ có ~228px (oyama.css chừa 400px cho logo + tên)
   -> chữ nhỏ lại, xuống dòng trong khung thay vì đè lên "無料査定はこちら". */
@media (min-width: 1200px){
  .header-style-two .brand-name{ max-width: 222px; }
}
html.translated-ltr .header-style-two .brand-name strong{ font-size: 16px; letter-spacing: 0; line-height: 1.25; }
html.translated-ltr .header-style-two .brand-name span{ display: none; }
/* Menu + nút 無料査定 dịch ra dài gấp đôi: giữ 1 dòng (chữ nhỏ lại, khoảng cách hẹp lại) thay vì rớt xuống dòng 2. */
@media (min-width: 1201px){
  html.translated-ltr .main-header .main-menu .navigation{ display: flex; flex-wrap: nowrap; }
  html.translated-ltr .main-header .main-menu .navigation > li{ margin: 0 11px; }
  html.translated-ltr .main-header .main-menu .navigation > li > a{ font-size: 15px; letter-spacing: 0; white-space: nowrap; }
  html.translated-ltr .main-header .menu-right-content .appointment-box a{ white-space: nowrap; font-size: 14px; }
  html.translated-ltr .header-top .top-inner .text-box a{ white-space: nowrap; }
}
/* Dòng "無料査定はこちら" dịch ra dài, đẩy cờ chồng lên biểu tượng điện thoại: ẩn khi màn hình chưa đủ rộng (nút 無料査定 ở thanh menu làm cùng việc). */
@media (max-width: 1499px){
  html.translated-ltr .header-top .top-inner .text-box{ display: none; }
}
html.translated-ltr .banner-style-two .content-box .btn-box .theme-btn{ white-space: nowrap; }
.goog-text-highlight{
  background: none !important;
  box-shadow: none !important;
}

/* ---------- chân trang ---------- */
.footer-bottom .credit{ margin-left: 8px; opacity: .7; }
.empty{ padding: 30px 0; color: var(--text-color); }