/* ==============================================================
   Responsive overrides — 井戸屋「明日HOLE」
   モバイル (〜767px) / タブレット (768〜1024px) / PC (1025px〜)
   colors_and_type.css の後に読み込む
   ============================================================== */

/* すべての section が overflow しないように */
* { max-width: 100%; }
body { overflow-x: hidden; }

/* ===================== HEADER ===================== */
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 32px;
  max-width: 1180px;
  margin: 0 auto;
}

/* ハンバーガーメニュートグル */
.hamburger-btn {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: #1F3A0F;
  position: relative;
  transition: all 240ms;
}
.hamburger-btn span::before,
.hamburger-btn span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: #1F3A0F;
  transition: all 240ms;
}
.hamburger-btn span::before { top: -7px; }
.hamburger-btn span::after { top: 7px; }
.hamburger-btn[data-open="true"] span { background: transparent; }
.hamburger-btn[data-open="true"] span::before { top: 0; transform: rotate(45deg); }
.hamburger-btn[data-open="true"] span::after { top: 0; transform: rotate(-45deg); }

/* ドロワーメニュー本体 */
.mobile-drawer {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 84vw;
  max-width: 320px;
  height: 100vh;
  background: #fff;
  box-shadow: -8px 0 32px rgba(0,0,0,0.15);
  z-index: 100;
  padding: 88px 28px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  flex-direction: column;
  gap: 8px;
}
.mobile-drawer[data-open="true"] {
  transform: translateX(0);
}
.mobile-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99;
  opacity: 0;
  transition: opacity 240ms;
}
.mobile-drawer-backdrop[data-open="true"] {
  opacity: 1;
}
.mobile-drawer a {
  display: block;
  padding: 14px 0;
  color: #1F2937;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  border-bottom: 1px solid #F3F0E8;
}
.mobile-drawer a.mobile-cta {
  border-bottom: none;
  margin-top: 20px;
  padding: 14px 20px;
  background: #E88B3C;
  color: #fff;
  border-radius: 6px;
  text-align: center;
}
.mobile-drawer a.mobile-cta-line {
  border-bottom: none;
  margin-top: 8px;
  padding: 14px 20px;
  background: #06C755;
  color: #fff;
  border-radius: 6px;
  text-align: center;
}
.mobile-drawer a.mobile-tel {
  border-bottom: none;
  margin-top: 20px;
  padding: 12px 16px;
  background: #F3F0E8;
  border-radius: 6px;
  font-family: 'Noto Serif JP', serif;
  font-size: 19px;
  color: #1E4A7B;
  text-align: center;
}

/* ===================== ヒーロー / セクション ===================== */
/* デフォルト（PC）は現状 (Reactインラインスタイル) で動作 */

/* ================== MEDIA QUERIES ================== */
@media (max-width: 900px) {
  .site-header-inner {
    padding: 10px 20px !important;
  }
  /* デスクトップナビ非表示 */
  .desktop-nav {
    display: none !important;
  }
  /* ハンバーガー表示 */
  .hamburger-btn {
    display: flex !important;
  }
  /* ヘッダー右側の電話+LINEはコンパクト化 */
  .header-quick-actions {
    display: flex !important;
    align-items: center;
    gap: 8px;
  }
}

@media (min-width: 901px) {
  .hamburger-btn { display: none !important; }
  .mobile-drawer { display: none !important; }
  .mobile-drawer-backdrop { display: none !important; }
}

/* ============ モバイル (768px 以下) ============ */
@media (max-width: 767px) {
  /* コンテナ余白 */
  .section-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* セクション上下余白 */
  .responsive-section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  /* ヒーロー */
  .hero-section {
    padding-top: 60px !important;
    padding-bottom: 72px !important;
  }
  .hero-h1 {
    font-size: 44px !important;
    line-height: 1.15 !important;
  }
  .hero-lead {
    font-size: 15px !important;
    line-height: 1.85 !important;
  }
  .hero-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100%;
  }
  .hero-buttons > a {
    justify-content: center !important;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 20px !important;
    font-size: 15px !important;
  }
  /* Hero V3 3カラム価値 → 縦積み */
  .hero-value-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-top: 32px !important;
  }
  /* Section 見出し */
  .section-title {
    font-size: 28px !important;
  }
  .section-overline {
    font-size: 12px !important;
  }
  /* Strengths / Services / Flow の複数カラム → 縦積み */
  .grid-3-to-1,
  .grid-2-to-1,
  .grid-4-to-1 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Flow の矢印を非表示 (縦積みでは不要) */
  .flow-arrow {
    display: none !important;
  }
  /* Voice section 2カラム → 縦積み */
  .voice-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .voice-image {
    aspect-ratio: 4/3 !important;
  }
  /* Pricing の 2カラム → 縦積み */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .pricing-card {
    padding: 32px 24px 28px !important;
  }
  .pricing-price {
    font-size: 40px !important;
  }
  /* FAQ */
  .faq-question {
    font-size: 15px !important;
    padding: 16px 18px !important;
  }
  .faq-answer {
    padding: 0 18px 20px 42px !important;
    font-size: 13px !important;
  }
  /* Contact CTA */
  .cta-title {
    font-size: 32px !important;
  }
  .contact-methods {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Footer 4カラム → 2カラム */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 11px !important;
  }
}

/* ============ タブレット (768〜1024px) ============ */
@media (min-width: 768px) and (max-width: 1024px) {
  .section-container {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  .grid-3-to-1 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid-4-to-1 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr !important;
  }
  .footer-brand { grid-column: 1 / -1; }
  .hero-h1 {
    font-size: 64px !important;
  }
}