/*
  Top page responsive baseline (desktop-first)
  Breakpoints:
    - sm:  @media (max-width: 767px)
    - md:  @media (min-width: 768px) and (max-width: 1023px)
    - lg:  @media (min-width: 1024px)  // base styles live in public/assets/css/main.css
  Scope: layouts/top + top/index sections only（他画面は未適用）
*/

/* Prevent horizontal overflow globally on top pages */
html, body {
  overflow-x: hidden;
}

/* General safety: prevent long strings from causing horizontal scroll */
.news-item, .news-description,
.project-card, .project-title, .project-company,
.event-card, .event-title, .event-description,
.blog-card, .blog-post-title, .blog-excerpt,
.qa-item, .qa-question-title, .qa-question-text {
  overflow-wrap: anywhere; /* safe for long words/URLs */
  word-break: normal;
}

/* Images scale within containers */
.hero img,
.blog-thumbnail img,
.event-image img,
.projects-grid img {
  max-width: 100%;
  height: auto;
}

/* Generic table wrapper utility */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { width: 100%; border-collapse: collapse; }

/* lg: desktop — no change to hero title per spec */

/* Header: hamburger + drawer (keep original fixed header behavior from main.css) */
.hamburger {
  display: none;
  width: 40px; height: 40px;
  border: none;
  background: transparent; color: var(--black);
  align-items: center; justify-content: center;
  cursor: pointer;
}
.hamburger .bar {
  width: 20px; height: 2px; background: currentColor; display: block; position: relative;
}
.hamburger .bar::before,
.hamburger .bar::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; }
.hamburger .bar::before { top: -6px; }
.hamburger .bar::after  { top:  6px; }

.drawer { position: fixed; inset: 0; z-index: 2000; display: block; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .25s ease, visibility 0s .25s; }
.drawer.open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .25s ease, visibility 0s 0s; }
.drawer .backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.drawer .panel { position: absolute; right: 0; top: 0; bottom: 0; width: 80%; max-width: 320px; background: #fff; transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.drawer.open .panel { transform: translateX(0); }
.drawer .panel .drawer-header { display:flex; justify-content: space-between; align-items:center; padding: 16px; border-bottom: 2px solid var(--black); }
.drawer .panel .drawer-close { border: 2px solid var(--black); background: #fff; width: 36px; height: 36px; border-radius: 6px; cursor: pointer; }
.drawer .nav { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.drawer .nav a { padding: 12px 8px; color: var(--black); text-decoration: none; font-weight: 600; border: none; position: relative; }
.drawer .nav a::after { display: none !important; content: none !important; }

/* Drawer buttons (login / register) align with top page styling */
.drawer .btn {
  width: 100%;
  padding: 12px 32px;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 2px solid var(--black);
  border-radius: 0;
}

.drawer .btn-primary {
  background: var(--black);
  color: var(--white);
}

.drawer .btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--white);
}

.drawer .btn-secondary {
  background: var(--white);
  color: var(--black);
}

.drawer .btn-secondary:hover {
  background: var(--black);
  color: var(--white);
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .drawer { transition: none !important; }
  .drawer .panel { transition: none !important; }
}

/* Header actions: button sizing */
.header-actions .btn { padding: 8px 14px; font-size: 14px; }

/* Reorder on small screens (smartphone): logo — login — register — hamburger */
@media (max-width: 767px) {
  .header-content {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-left: 10px;
    padding-right: 10px;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    min-height: 60px !important;  /* ヘッダー高さを少し増やす */
  }
  .nav { display: none !important; }
  /* keep drawer nav visible even when header nav is hidden */
  .drawer .nav { display: flex !important; }
  /* Logo on the left (サイズを大きく) */
  .logo {
    flex: 0 0 auto !important;
    max-width: 130px;  /* 110px → 130px */
    margin-right: auto !important;
    display: flex !important;
    align-items: center;
    order: 1 !important;
  }
  .logo img { max-height: 42px; width: auto; }  /* 36px → 42px */
  /* Actions and hamburger grouped on the right (サイズを大きく) */
  .header-actions {
    display: inline-flex !important;
    gap: 8px;  /* 6px → 8px */
    align-items: center;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    order: 2 !important;
  }
  .header-actions .btn {
    padding: 7px 12px;  /* 5px 8px → 7px 12px */
    font-size: 13px;  /* 11px → 13px */
    white-space: nowrap;
    font-weight: 600;
  }
  .hamburger {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin-left: 10px;  /* 8px → 10px */
    order: 3 !important;
    width: 44px;  /* 40px → 44px */
    height: 44px;  /* 40px → 44px */
  }
}

/* Medium screens (iPhone XR, Pixel 7: 412-414px) */
@media (max-width: 414px) {
  .header-content { padding-left: 8px; padding-right: 8px; gap: 6px; }
  .logo { max-width: 120px; }  /* 100px → 120px */
  .logo img { max-height: 38px; width: auto; }  /* 32px → 38px */
  .logo span { font-size: 14px; }
  .header-actions { gap: 6px; }  /* 4px → 6px */
  .header-actions .btn {
    padding: 6px 10px;  /* 4px 7px → 6px 10px */
    font-size: 12px;  /* 10px → 12px */
  }
  .hamburger {
    width: 40px;  /* 36px → 40px */
    height: 40px;  /* 36px → 40px */
  }
  .hamburger .bar { width: 18px; }  /* 17px → 18px */
  .hamburger .bar::before,
  .hamburger .bar::after { width: 18px; }  /* 17px → 18px */
}

/* Extra small screens (iPhone 12 Pro and smaller: 390px and below) */
@media (max-width: 390px) {
  .header-content { padding-left: 6px; padding-right: 6px; gap: 4px; }
  .logo { max-width: 110px; }  /* 90px → 110px */
  .logo img { max-height: 35px; width: auto; }  /* 30px → 35px */
  .logo span { font-size: 13px; }
  .header-actions { gap: 4px; }  /* 3px → 4px */
  .header-actions .btn {
    padding: 5px 8px;  /* 4px 6px → 5px 8px */
    font-size: 11px;  /* 9px → 11px */
  }
  .hamburger {
    width: 38px;  /* 32px → 38px */
    height: 38px;  /* 32px → 38px */
  }
  .hamburger .bar { width: 16px; }  /* 15px → 16px */
  .hamburger .bar::before,
  .hamburger .bar::after { width: 16px; }  /* 15px → 16px */
}

/* Tablet: use hamburger + drawer (same behavior as smartphone) */
@media (min-width: 768px) and (max-width: 1023px) {
  .header-content {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-left: 24px;
    padding-right: 24px;
    flex-wrap: nowrap !important;
  }
  .logo {
    flex: 0 0 auto !important;
    margin-right: auto !important;
  }
  .nav { display: none !important; }
  .drawer .nav { display: flex !important; }
  .header-actions {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
  }
  .hamburger {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin-left: 8px;
  }
  /* keep footer visible */
  .footer { display: block !important; position: relative; z-index: 1; clear: both; width: 100%; }
}

/* Hide legacy SP header blocks on small screens to avoid duplication */
@media (max-width: 1023px) {
  .navbar-sp-header, .navbar-sp-body { display: none !important; }
}

/* Mypage header: prevent overlap and stack welcome/buttons; keep hamburger on same second row */
@media (max-width: 1023px) {
  /* Use grid to ensure 2 rows: 1) welcome, 2) buttons + hamburger */
  .page-mypage .header { padding-bottom: 8px; }
  .page-mypage .header-content {
    display: grid;
    grid-template-columns: auto 1fr 40px; /* logo | actions | hamburger */
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 6px;
    padding-left: 12px;
    padding-right: 12px;
  }
  /* Hide inline nav; drawer is used */
  .page-mypage .nav { display: none !important; }
  /* But keep drawer navigation visible inside mypage */
  .page-mypage .drawer .nav { display: flex !important; }
  /* Place logo on left, spanning both rows */
  .page-mypage .logo { grid-column: 1 / 2; grid-row: 1 / 3; }
  /* Header actions occupy middle column, spanning two rows */
  .page-mypage .header-actions {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    min-width: 0;
    justify-self: end;
    padding-right:6px;
  }
  /* Hamburger sits on second row, right column */
  .page-mypage #hamburger {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    justify-self: end;
    align-self: center;
    width: 40px;
    height: 40px;
    margin-right: 2px;
  }
  /* Inside header-actions keep buttons grouped to the right */
  .page-mypage .header-actions .user-actions { display: flex; justify-content: flex-end; }
  .page-mypage .header-actions .welcome { font-size: 14px; }
  .page-mypage .header-actions .action-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .page-mypage .header-actions .action-row .btn { padding: 5px 9px; font-size: 11px; }
}

/* Authenticated user header adjustments for small screens */
@media (max-width: 767px) {
  .header-actions .user-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .header-actions .welcome { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
  .header-actions .welcome .user-name { font-size: 12px; }
  .header-actions .action-row { display: flex; gap: 6px; }
  .header-actions .action-row .btn { padding: 6px 10px; font-size: 12px; }

  /* Keep mypage buttons aligned horizontally like top header */
  .page-mypage .header-actions .user-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  .page-mypage .header-actions .action-row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
  }
  .page-mypage .header-actions .action-row .btn {
    padding: 5px 9px;
    font-size: 11px;
  }
}

/* Medium screens - authenticated user adjustments */
@media (max-width: 414px) {
  .header-actions .welcome { font-size: 11px; max-width: 140px; }
  .header-actions .welcome .user-name { font-size: 11px; }
  .header-actions .action-row .btn { padding: 5px 9px; font-size: 11px; }
}

/* Extra small screens - authenticated user adjustments */
@media (max-width: 390px) {
  .header-actions .welcome { font-size: 10px; max-width: 120px; }
  .header-actions .welcome .user-name { font-size: 10px; }
  .header-actions .action-row .btn { padding: 4px 7px; font-size: 10px; }
  /* Stack buttons vertically on very small screens if authenticated */
  .header-actions .action-row { flex-direction: column; width: 100%; }
  .header-actions .action-row .btn { width: 100%; text-align: center; }

  /* Keep mypage header horizontal and allow wrapping instead of forced stacking */
  .page-mypage .header-actions .action-row {
    flex-direction: row;
    width: auto;
  }
  .page-mypage .header-actions .action-row .btn {
    width: auto;
  }
}

/* md: 768–1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Projects: 2列グリッドで表示 */
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
    overflow-x: visible; /* 横スクロールを無効化 */
    grid-auto-flow: row;
    gap: 20px;
  }

  /* 検索結果ページ専用のプロジェクトグリッド調整 */
  .search-results .projects-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 0;
  }

  .search-results .project-card {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  /* Events/Blog: タブレットも横スクロール */
  .events-grid,
  .blog-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 60%;
    grid-template-columns: none;
    gap: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .event-card,
  .blog-card { scroll-snap-align: start; }

  /* Containers padding a bit tighter */
  .swiss-grid,
  .news-container,
  .events-container,
  .blog-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Hero typography */
  .display-1 { font-size: 56px; }
  .hero-subtitle { font-size: 20px; }

  /* Section titles */
  .news-title,
  .search-title,
  .events-title,
  .blog-title,
  .qa-title { font-size: 36px; }
  .cta-title { font-size: 36px; }

  /* Project card date position slightly tighter */
  .project-date {
    top: 16px !important;
    right: 16px !important;
  }

  /* タブレット時：project-badgeが存在する場合、dateを下に移動 */
  .project-card:has(.project-badge) .project-date {
    top: 44px !important;  /* badgeと重ならないよう下に移動 */
  }

  /* :has()非対応ブラウザ向け */
  .project-badge ~ .project-date {
    top: 44px !important;
  }

  /* Search form padding tighter */
  .search-form {
    padding: 32px;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;  /* タブレットは2カラム */
    gap: 20px !important;
    width: 100%;
  }

  /* form-groupを適切に配置 */
  .search-form .form-group {
    grid-column: span 1 !important;  /* 各フィールドは1カラム幅 */
    width: 100%;
  }

  /* キーワードフィールドは全幅 */
  .search-form .form-group[style*="grid-column"] {
    grid-column: 1 / -1 !important;  /* 2カラム全体を使用 */
  }

  /* 検索ボタンがあるform-groupも全幅 */
  .search-form .form-group:has(.search-button) {
    grid-column: 1 / -1 !important;
  }

  /* トップページ検索フォームのみ3カラムレイアウト */
  .search-form--top {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* トップページの検索ボタンを全幅表示に */
  .search-form--top .search-button {
    grid-column: 1 / -1 !important;
    width: 100%;
    justify-self: stretch;
  }

  /* Hero height a bit smaller than full */
  .hero { min-height: 70vh; }
  /* Tablet — keep default sizes (no change) */

  /* Pricing plan cards: 2 columns on tablet */
  .plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  /* Compare table: allow horizontal scroll */
  .compare-container { overflow-x: auto; }
  .compare-container .compare-table { min-width: 720px; }

  /* Unified typography (tablet) */
  .page-header__title { font-size: 32px; line-height: 1.3; }
  .page-header__sub { font-size: 16px; }
  .post__title,
  .news-detail__title,
  .event-detail__title,
  .qa-title { font-size: 28px; line-height: 1.3; }

  /* Policy/Guide/Contact wrappers (tablet) */
  .sub-hero__inner { padding-left: 24px; padding-right: 24px; }
  .terms-wrap { grid-template-columns: 220px 1fr; gap: 16px; padding: 0 24px; }
  .toc { top: 96px; }
  .article { padding: 20px; }
  .section { padding: 40px 0; }
  .inner { padding: 0 24px; }
}

/* sm: ≤767px */
@media (max-width: 767px) {
  /* Base mobile typography */
  body { font-size: 16px; line-height: 1.7; }
  .caption { font-size: 12px; }

  /* Grid step-down: 3/2 → 1 col */
  /* Projects: カードデザインで1列表示 */
  .projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    /* 横スクロールを無効化 */
    overflow-x: visible;
    grid-auto-flow: row;
  }

  /* 検索結果ページ専用のプロジェクトカード調整 */
  .search-results .projects-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0;
  }

  .search-results .project-card {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  /* Events/Blog: 横スクロールのまま維持 */
  .events-grid,
  .blog-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    grid-template-columns: none; /* override desktop grid */
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }

  .project-card {
    scroll-snap-align: none; /* スナップを無効化 */
  }

  .event-card,
  .blog-card { scroll-snap-align: start; }

  /* Global container paddings for top sections */
  .swiss-grid,
  .news-container,
  .events-container,
  .blog-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Hero sizing: readable on small screens */
  .display-1 { font-size: 32px; }
  .display-2, .heading-1 { font-size: 24px; }
  .heading-2 { font-size: 20px; }
  .heading-3 { font-size: 18px; }
  .hero-subtitle { font-size: 16px; }
  .hero { min-height: 60vh; }
  .cta-title { font-size: 22px; }
  /* Slightly larger hero title (smartphone only) */
  .hero .display-1.hero-title { font-size: 38px; }

  /* Carousel controls: reduce footprint on small or hide if needed */
  .carousel-controls { display: none; }
  .carousel-indicator { width: 8px; height: 8px; }

  /* Section titles (unified) */
  .news-title,
  .search-title,
  .events-title,
  .blog-title,
  .qa-title { font-size: 22px; line-height: 1.35; }

  /* News list density */
  .news-item { padding: 12px 16px; }
  .news-date { min-width: 72px; font-size: 13px; }
  .news-item .news-item-title { font-size: 16px; }

  /* Search form stack */
  .search-form {
    padding: 24px;
    display: grid !important;
    grid-template-columns: 1fr !important;  /* 12カラムから1カラムに変更 */
    gap: 16px !important;
    width: 100%;
  }

  /* 全てのform-groupを全幅に */
  .search-form .form-group {
    grid-column: 1 / -1 !important;  /* 全幅を使用 */
    width: 100%;
  }

  /* キーワードフィールドも確実に全幅 */
  .search-form .form-group[style*="grid-column"] {
    grid-column: 1 / -1 !important;
  }

  .search-button {
    width: 100%;
    grid-column: 1 / -1 !important;
    justify-self: stretch;
  }

  /* Card titles and text (unified) */
  .project-card { padding: 20px; }
  .project-title,
  .event-title,
  .blog-post-title,
  .news-item .news-item-title,
  .qa-question-title { font-size: 16px; line-height: 1.4; }

  /* project-dateの基本位置 */
  .project-date {
    top: 12px !important;    /* デフォルト位置を上書き */
    right: 12px !important;
  }

  /* project-badgeが存在する場合、dateを下に移動して重ならないように */
  .project-card:has(.project-badge) .project-date {
    top: 40px !important;  /* badgeの高さ分（約28px）+ 余白分下に移動 */
  }

  /* :has()がサポートされていないブラウザ向けの代替案 */
  .project-badge ~ .project-date {
    top: 40px !important;  /* badgeの後のdateを下に移動 */
  }

  .project-company,
  .event-description,
  .blog-excerpt,
  .news-description { font-size: 14px; line-height: 1.6; }
  .form-label { font-size: 12px; }

  /* Blog card thumbnail height reduction */
  .blog-thumbnail { height: 200px; }

  /* QA actions: stack buttons */
  .qa-actions { flex-direction: column; gap: 12px; }

  /* CTA buttons: stack vertically */
  .cta-buttons { display: grid; grid-template-columns: 1fr; gap: 12px; justify-items: stretch; }
  .cta-buttons .btn { width: 100%; }

  /* Pricing: one column cards on phone */
  .plan-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
  /* Compare table: allow horizontal scroll */
  .compare-container { overflow-x: auto; }
  .compare-container .compare-table { min-width: 640px; }

  /* QA forms: stack nicely */
  .qa-form { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .qa-form .form-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .qa-form .form-control, .qa-form textarea, .qa-form input, .qa-form select { width: 100%; font-size: 16px; }

  /* Unified typography (smartphone) */
  .page-header__title { font-size: 28px; line-height: 1.3; }
  .page-header__sub { font-size: 16px; }
  .post__title,
  .news-detail__title,
  .event-detail__title,
  .qa-title { font-size: 24px; line-height: 1.35; }
  .blog-post-title,
  .event-title,
  .case-title,
  .news-item .news-item-title,
  .qa-question-title { font-size: 16px; line-height: 1.4; }
  .body-regular,
  .event-description,
  .blog-excerpt,
  .news-description { font-size: 16px; line-height: 1.7; }
  .blog-date,
  .event-date,
  .news-date,
  .caption { font-size: 12px; }

  /* Policy/Guide/Contact wrappers (smartphone) */
  .sub-hero__inner { padding-left: 16px; padding-right: 16px; }
  .terms-wrap { grid-template-columns: 1fr; gap: 12px; padding: 0 16px; }
  .toc { position: static; width: 100%; }
  .article { padding: 16px; }
  .section { padding: 24px 0; }
  .inner { padding: 0 16px; }
  /* Contact form grid: single column */
  .form .grid { grid-template-columns: 1fr !important; gap: 12px; }
  .form .full { grid-column: 1 / -1; }
  /* Contact form actions: stack buttons one per row */
  .form .grid .full { display: grid !important; grid-template-columns: 1fr !important; row-gap: 8px; }
  .form .grid .full .btn { width: 100%; text-align: center; }
}

/* Ensure hero images always cover vertical space */
.carousel-slide img { object-fit: cover; width: 100%; height: 100%; min-height: 100%; }

/* 検索結果ページのモバイル表示修正 */
@media (max-width: 767px) {
  /* search-contentとswiss-gridの余白調整 */
  .search-results .swiss-grid {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* search-contentのグリッドレイアウトを解除し、単純なブロックに */
  .search-results .search-content {
    display: block !important;  /* 12カラムグリッドを解除 */
    padding: 0;
    margin: 0;
    gap: 0 !important;  /* gap設定を無効化 */
  }

  /* プロジェクトカードのボックスサイズ調整 */
  .search-results .project-card {
    width: 100%;
    max-width: 100%;
    padding: 20px !important;  /* 32pxから20pxに縮小 */
    margin: 0;
    box-sizing: border-box;
  }

  /* グリッドコンテナの調整 */
  .search-results .projects-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;  /* 単一カラムに確実に設定 */
    width: 100%;
    padding: 0;
    margin: 0;
    gap: 16px !important;  /* gapを適切に調整 */
  }

  /* カード内の要素サイズ調整 */
  .search-results .project-card .project-title {
    font-size: 16px;
    word-break: break-word;
  }

  .search-results .project-card .project-company {
    font-size: 14px;
    word-break: break-word;
  }

  .search-results .project-card .project-date {
    padding: 4px 8px;
    font-size: 12px;
  }
}

/* タブレット表示の調整 */
@media (min-width: 768px) and (max-width: 1023px) {
  .search-results .swiss-grid {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* search-contentのグリッドレイアウトを簡略化 */
  .search-results .search-content {
    display: block !important;
    gap: 0 !important;
  }

  .search-results .projects-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .search-results .project-card {
    padding: 24px !important;  /* タブレットではやや大きめ */
    box-sizing: border-box;
  }

  /* 検索フォームのレイアウト調整 */
  .search-results .search-form {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .search-results .search-form .form-group {
    grid-column: span 1 !important;
  }

  /* キーワードフィールドは全幅 */
  .search-results .search-form .form-group[style*="grid-column"] {
    grid-column: 1 / -1 !important;
  }

  .search-results .search-form .form-group:has(.search-button) {
    grid-column: 1 / -1 !important;
  }

  /* タブレット時のproject-dateとproject-badgeの重なり防止 */
  .project-date {
    top: 16px !important;    /* デフォルト32pxから調整 */
    right: 16px !important;  /* デフォルト32pxから調整 */
  }

  /* project-badgeが存在する場合、dateを下に移動 */
  .project-card:has(.project-badge) .project-date {
    top: 44px !important;  /* badgeの高さ分下に移動（タブレット用） */
  }

  /* :has()がサポートされていないブラウザ向けの代替案 */
  .project-badge ~ .project-date {
    top: 44px !important;  /* badgeの後のdateを下に移動 */
  }
}

/* Q&A mobile adjustments */
@media (max-width: 767px) {
  .qa-header { text-align: center; }
  .qa-title { font-size: 22px; }
  .qa-subtitle { font-size: 14px; color: var(--gray-600); }
  .qa-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }

  .qa-list { display: grid; gap: 16px; }
  .qa-item { padding: 16px; border-width: 2px; }
  .qa-question-header { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .qa-question-title { font-size: 18px; line-height: 1.4; }
  .qa-question-text {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 14px; color: var(--gray-800);
  }
  .qa-question-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .qa-asker { gap: 6px; }
  .qa-avatar { width: 24px; height: 24px; font-size: 12px; }
  .qa-answer-preview { margin-top: 10px; }
  .qa-answer-text { font-size: 14px; line-height: 1.5; }
}