@charset "utf-8";
/* CSS Document */

/* --- 960px幅コンテナ --- */
#tw-main-wrapper {
  width: 100%;
  max-width: 700px;
  margin: 20px auto;
  padding: 0;
  overflow: visible; /* Swiperの影などが切れないよう調整 */
}

/* 既存サイト(Normalize, jQuery UI等)の干渉を強力にリセット */
#tw-main-wrapper *,
#tw-main-wrapper *::before,
#tw-main-wrapper *::after {
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
}

/* --- Swiper基本構造 --- */
#tw-main-wrapper .swiper {
  width: 100%;
  aspect-ratio: 700 / 300;
  border-radius: 8px;
  background-color: #fff;
}

#tw-main-wrapper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0 !important;
  background-size: cover;
  background-position: center;
}

#tw-main-wrapper .swiper-slide-active {
  opacity: 1 !important;
}

/* --- Slide 01: 修理バナー --- */
#tw-main-wrapper .slide-01 {
  background: linear-gradient(135deg, #004aad 0%, #002d62 100%);
}

#tw-main-wrapper .repair-banner-main {
  width: 100%;
  height: 100%;
  padding-left: 6%;
  display: flex;
  align-items: center;
  position: relative;
}

#tw-main-wrapper .content-area {
  width: 60%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 既存サイトの h1 { line-height: 20px, font-weight: normal } を強制上書き */
#tw-main-wrapper .banner-title {
  color: #fff !important;
  font-size: clamp(20px, 5vw, 38px) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important; 
  text-shadow: 2px 4px 6px rgba(0,0,0,0.4);
  text-align: left !important;
  
}

#tw-main-wrapper .banner-badges {
  display: flex;
  gap: 8px;
}

#tw-main-wrapper p .badge {
  background: #fff !important;
  color: #ff4500 !important;
  padding: 2px 8px !important;
  font-size: clamp(10px, 2.5vw, 18px) !important;
  font-weight: bold !important;
  border-radius: 4px;
}

#tw-main-wrapper .banner-price p {
  color: #fff !important;
  font-size: clamp(12px, 3.2vw, 24px) !important;
  font-weight: bold !important;
}

#tw-main-wrapper .banner-phone {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#tw-main-wrapper p .phone-label {
  color: #fff !important;
  font-size: clamp(10px, 2vw, 14px) !important;
}

#tw-main-wrapper p .phone-number {
  color: #fff !important;
  font-size: clamp(16px, 4.5vw, 24px) !important;
  font-weight: bold !important;
}

#tw-main-wrapper .banner-image {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 95% !important;
  width: auto !important;
  z-index: 1;
}

/* --- Slide 02 & 03: 共通ボックス --- */
#tw-main-wrapper .overlay-box {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px 25px !important;
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  z-index: 10;
  pointer-events: none;
}

#tw-main-wrapper .overlay-title {
  color: #333 !important;
  font-size: clamp(14px, 4.5vw, 32px) !important;
  line-height: 1.4 !important;
  font-weight: bold !important;
  white-space: nowrap;
  text-align: center !important;
}

#tw-main-wrapper .slide-02 {
  background-image: url('/images/img/sliders/smile-title.jpg');
}

/* --- Slide 03: グリッドメニュー --- */
#tw-main-wrapper .menu-grid-container {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1px;
  background-color: #ccc;
}

#tw-main-wrapper .menu-item5 {
  background-color: #fff;
  color: #008080 !important;
  font-size: clamp(11px, 2vw, 20px) !important;
  font-weight: bold !important;
  text-decoration: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center !important;
  line-height: 1.3 !important;
}

/* ページネーションの色 */
#tw-main-wrapper .swiper-pagination-bullet-active {
  background: #333 !important;
}