/* ═══════════════════════════════════════════════════════════
 * phone.css — yui craft okinawa スマートフォン・タブレット用スタイル
 * ═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
 * ここから タブレット（768px 以下）
 * ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ヘッダー：固定 */
  .site-header { position: fixed; top: 0; left: 0; right: 0; }
  .header-inner { padding: 0 20px; height: 64px; }
  .header-nav a:not(.nav-cta) { display: none; }
  .header-nav .nav-cta { display: none; }
  .hamburger-btn { display: flex; }
  .mobile-nav { display: block; }

  /* ヘッダー分の余白（固定ヘッダーに被らないように） */
  .section-hero,
  .page-hero,
  .detail-breadcrumb { padding-top: 64px; }

  /* FV ヒーロー：2カラム → 1カラム */
  .section-hero { min-height: auto; padding-bottom: 80px; }
  .fv-main { position: relative; top: auto; left: auto; right: auto; padding: 80px 28px 0; }
  .fv-bottom { position: relative; bottom: auto; padding: 32px 28px 0; }
  .fv-grid { grid-template-columns: 1fr; min-height: auto; gap: 36px; }
  /* 画像：overflow:hidden でコンテナ外にはみ出さない + % 幅で縮む */
  .fv-images { height: 420px; overflow: hidden; }
  .fv-img-1 { width: 75%; max-width: 280px; height: 350px; right: 5%; top: 0; }
  .fv-img-2 { width: 52%; max-width: 190px; height: 240px; right: 0; top: 210px; }
  .fv-img-3 { width: 50%; max-width: 180px; height: 144px; top: 270px; right: auto; left: 0; }
  .fv-img-tag { display: none; }
  .fv-meta-bar { flex-wrap: wrap; gap: 8px; }
  .fv-stamp { display: none; }
  .fv-house { display: none; }

  /* ブログ：2カラム → 1カラム */
  .blog-grid { grid-template-columns: 1fr; gap: 40px; }

  /* 施工実績フィルタータブ：横スクロール */
  .works-filter {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .works-filter::-webkit-scrollbar { display: none; }
  .works-filter-btn { padding: 12px 16px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }

  /* 施工実績：3カラム → 2カラム */
  .works-grid { grid-template-columns: 1fr 1fr; gap: 24px; row-gap: 48px; }

  /* お客様の声：3カラム → 1カラム */
  .voice-grid { grid-template-columns: 1fr; }

  /* 会社情報：2カラム → 1カラム */
  .company-grid { grid-template-columns: 1fr; gap: 0; }

  /* INDEX ナビ → 5タブを画面幅に均等配置 */
  .company-nav-side { position: static; margin-bottom: 40px; width: 100%; }
  .company-nav-label { display: none; }
  .company-nav-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: visible;
    border-bottom: 1px solid var(--line);
    gap: 0;
  }
  .company-nav-link {
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    padding: 10px 4px;
    border-top: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: normal;
    cursor: pointer;
    min-width: 0;
  }
  .company-nav-link.active { border-bottom-color: var(--ink); color: var(--ink); }
  .company-nav-en { font-size: 8px; letter-spacing: .08em; }
  .company-nav-jp { font-size: 11px; }

  /* フッター：4カラム → 2カラム */
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* 数字グリッド：4カラム → 2カラム */
  .numbers-grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .number-item,
  .number-item-border { padding: 24px 20px; border-left: none; border-top: none; }
  .numbers-grid .number-item:nth-child(even) { border-left: 1px solid var(--line); }
  .numbers-grid .number-item:nth-child(n+3) { border-top: 1px solid var(--line); }

  /* お問い合わせ LP：3カラム → 1カラム */
  .clp-channels { grid-template-columns: 1fr; }
  .clp-form-inner { padding: 32px 24px; }


  /* ─── 詳細ページ 共通（タブレット） ─── */
  .detail-breadcrumb { padding: 88px 24px 0; }
  .detail-pager { padding: 48px 24px; }
  .detail-pager-inner { grid-template-columns: 1fr auto 1fr; gap: 20px; }

  /* ─── 施工実績 詳細（タブレット） ─── */
  .wd-title-block { padding: 36px 24px 40px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .wd-title-h1 { font-size: 32px; }
  .wd-title-meta { text-align: left; }
  .wd-hero { padding: 0 24px; }
  .wd-body { padding: 60px 24px; }
  .wd-body-inner { grid-template-columns: 1fr; gap: 40px; }
  .wd-gallery { padding: 0 24px 60px; }
  .wd-gallery-main { grid-template-columns: 1fr; }
  .wd-gallery-sub { grid-template-rows: auto; grid-template-columns: 1fr 1fr; gap: 12px; }
  .wd-gallery-row3 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .wd-gallery-row3 .wd-photo:last-child { display: none; }
  .wd-timeline { padding: 60px 24px; }
  .wd-timeline-row { grid-template-columns: 90px 1fr 16px; gap: 16px; }

  /* ─── ブログ 詳細（タブレット） ─── */
  .bd-title-block { padding: 48px 24px 36px; }
  .bd-title-h1 { font-size: 32px; }
  .bd-title-meta { flex-wrap: wrap; gap: 10px; justify-content: center; }
  .bd-hero { padding: 0 24px 40px; }
  .bd-article { padding: 16px 24px 60px; }

}
/* ここまで タブレット（768px 以下） */

/* ───────────────────────────────────────────────────────────
 * ここから スマートフォン（480px 以下）
 * ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* 全セクションの左右パディングを縮小 */
  .section-hero,
  .section-blog,
  .section-works,
  .section-voice,
  .section-company,
  .section-contact-cta,
  .site-footer,
  .page-hero,
  .section-contact { padding-left: 20px; padding-right: 20px; }

  /* ヘッダー */
  .header-inner { padding: 0 16px; }
  .header-nav .nav-cta { padding: 8px 14px; font-size: 12px; }

  /* FV ヒーロー スマートフォン：テキスト上・写真下レイアウト */
  .section-hero { padding-bottom: 48px; }
  .fv-meta-bar { display: none; }
  .fv-kanji-bg { font-size: 260px; left: -20px; top: 20px; }
  .fv-photo-blur { display: none; }
  .fv-bottom { display: none; }
  .fv-stamp {
    display: flex;
    position: absolute; top: -50px; right: -10px;
    bottom: auto; left: auto;
    width: 70px; height: 70px;
    font-size: inherit;
    transform: rotate(9deg);
    z-index: 3;
  }
  .fv-stamp-year { font-size: 18px; }
  .fv-house {
    display: block;
    position: absolute; top: 480px; right: -44px;
    left: auto; bottom: auto;
    width: 80px; opacity: 0.45;
  }

  .fv-main {
    position: relative; top: auto; left: auto; right: auto;
    padding: 72px 20px 0;
  }
  .fv-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    min-height: auto;
  }

  /* テキストカラム */
  .fv-text { padding-bottom: 0; }
  .fv-title { font-size: 38px; line-height: 1.2; }
  .fv-body { font-size: 14px; line-height: 1.7; }
  .fv-cta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .fv-cta .btn { width: 100%; text-align: center; justify-content: center; }
  .fv-area-header { margin-top: 20px; }

  /* 写真エリア：2カラムグリッド */
  .fv-images {
    position: static;
    height: auto;
    overflow: visible;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .fv-img-1 {
    position: static; transform: none;
    width: 100%; height: 340px; max-width: none;
    grid-column: 1 / -1;
  }
  .fv-img-2 {
    position: static; transform: none;
    width: 100%; height: 120px; max-width: none;
  }
  .fv-img-3 {
    display: block;
    position: static; transform: none;
    width: 100%; height: 120px; max-width: none;
    top: auto; right: auto; left: auto;
  }
  .fv-img-inner { height: 100%; }
  .fv-img-tag {
    display: block;
    font-size: 9px; padding: 4px 10px;
    top: -10px; left: -10px;
  }
  .fv-img-caption { display: none; }
  .fv-img-note {
    position: absolute;
    bottom: 24px;
    right: 39px;
    margin: 0;
    padding: 0;
    font-family: var(--jp-sans);
    font-size: 10px;
    color: var(--ink-mute);
    letter-spacing: .04em;
  }

  /* ブログ */
  .blog-feat-title { font-size: 22px; }

  /* 施工実績フィルタータブ */
  .works-filter { margin-bottom: 32px; }
  .works-filter-btn { padding: 10px 14px; font-size: 12px; }

  /* 施工実績：2カラム → 1カラム */
  .works-grid { grid-template-columns: 1fr; row-gap: 48px; }

  /* セクションタイトル */
  .section-title-jp { font-size: 30px; }

  /* お問い合わせ CTA */
  .contact-cta-title { font-size: 25px; }
  .contact-cta-actions { flex-direction: column; align-items: center; }

  /* お問い合わせ LP */
  .clp-header { padding: 80px 20px 40px; }
  .clp-channels { padding: 20px; }
  .clp-form-wrap { padding: 20px 20px 60px; }
  .clp-form-inner { padding: 28px 20px; }
  .clp-question { font-size: 22px; }

  /* 数字グリッド：2×2 維持 */
  .numbers-grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .number-item,
  .number-item-border { padding: 20px 16px; border-left: none; border-top: none; }
  .numbers-grid .number-item:nth-child(even) { border-left: 1px solid var(--line); padding-left: 20px; }
  .numbers-grid .number-item:nth-child(n+3) { border-top: 1px solid var(--line); padding-top: 20px; }
  .number-val { font-size: 40px; }
  .number-suf { font-size: 20px; }

  /* 会社 INDEX タブ */
  .company-nav-side { margin-bottom: 32px; }
  .company-nav-link { padding: 8px 2px; }
  .company-nav-en { font-size: 7px; letter-spacing: .06em; }
  .company-nav-jp { font-size: 10px; }

  /* 会社セクション トグル：スマホでは常時展開 */
  .toggle-icon { display: none; }
  .company-sub-label.company-toggle { cursor: default; padding: 14px 0; }
  .company-toggle-body { max-height: none; overflow: visible; }

  /* アクセスマップ */
  .access-info { grid-template-columns: 1fr; }

  /* フッター：コンパクト＋下線区切り */
  .site-footer { padding: 24px 20px 16px; }

  .footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  /* 各セクション共通：上線区切り */
  .footer-inner > div {
    padding: 14px 0;
  }
  .footer-inner > div + div {
    border-top: 1px solid rgba(251,248,241,.15);
  }

  /* ① ブランド：ロゴ＋タグライン横並び（全幅） */
  .footer-inner > div:nth-child(1) {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .footer-brand-name { margin-bottom: 0; flex-shrink: 0; }
  .footer-tagline { font-size: 11px; line-height: 1.6; margin: 0; }

  /* ② SITEMAP：全幅、リンク3列グリッド */
  .footer-inner > div:nth-child(2) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 8px;
  }
  .footer-inner > div:nth-child(2) .footer-col-label {
    grid-column: 1 / -1;
    margin-bottom: 6px;
  }
  .footer-link { font-size: 12px; padding: 3px 0; }

  /* ③ CONTACT（左） ＋ OFFICE（右）：2列横並び */
  .footer-inner > div:nth-child(3) {
    grid-column: 1;
    padding-right: 16px;
    border-right: 1px solid rgba(251,248,241,.15);
  }
  .footer-inner > div:nth-child(4) {
    grid-column: 2;
    padding-left: 16px;
    border-top: 1px solid rgba(251,248,241,.15);
  }

  .footer-col-label { font-size: 9px; margin-bottom: 6px; }
  .footer-info { font-size: 11px; line-height: 1.7; margin-bottom: 2px; }

  /* ④ コピーライト */
  .footer-bottom {
    flex-direction: column;
    gap: 4px;
    text-align: center;
    padding-top: 14px;
    margin-top: 0;
    font-size: 10px;
  }

  /* 会社情報テーブル */
  .company-table-row { grid-template-columns: 1fr; gap: 4px; }
  .company-greeting-grid { grid-template-columns: 1fr; }

  /* メンバー：1カラム */
  .company-members-grid { grid-template-columns: 1fr; }

  /* フローティング CTA */
  .floating-ctas { display: none; }

  /* ─── 詳細ページ 共通（スマートフォン） ─── */
  .detail-breadcrumb { padding: 80px 20px 0; font-size: 10px; }
  .detail-pager { padding: 36px 20px; }
  .detail-pager-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 24px;
    text-align: center;
  }
  .detail-pager-link { justify-content: flex-start; }
  .detail-pager-link.next { justify-content: flex-start; text-align: left; }
  .detail-pager-link svg { flex-shrink: 0; }
  .detail-pager-all { display: block; text-align: center; }

  /* ─── 施工実績 詳細（スマートフォン） ─── */
  .wd-title-block { padding: 24px 20px 32px; gap: 12px; }
  .wd-title-cat { font-size: 9px; }
  .wd-title-h1 { font-size: 24px; }
  .wd-hero { padding: 0 20px; }
  .wd-body { padding: 40px 20px; }
  .wd-concept-h2 { font-size: 20px; }
  .wd-concept-p { font-size: 14px; }
  .wd-data-card { padding: 24px 20px; }
  .wd-gallery { padding: 0 20px 40px; }
  .wd-gallery-main { gap: 10px; }
  .wd-gallery-sub { grid-template-columns: 1fr 1fr; gap: 10px; }
  .wd-gallery-row3 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .wd-timeline { padding: 40px 20px; }
  .wd-timeline-h2 { font-size: 22px; margin-bottom: 24px; }
  .wd-timeline-row { grid-template-columns: 72px 1fr; gap: 12px; padding: 16px 0; }
  .wd-timeline-dot { display: none; }
  .wd-timeline-week { font-size: 13px; }
  .wd-timeline-text { font-size: 14px; }

  /* ─── ブログ 詳細（スマートフォン） ─── */
  .bd-title-block { padding: 32px 20px 24px; }
  .bd-title-h1 { font-size: 24px; line-height: 1.45; }
  .bd-title-meta { gap: 8px; }
  .bd-cat-badge { font-size: 9px; }
  .bd-hero { padding: 0 20px 28px; }
  .bd-article { padding: 12px 20px 48px; }
  .bd-article-inner { font-size: 15px; }
  .bd-lead { font-size: 16px; }
  .bd-article-inner h2 { font-size: 20px; margin: 32px 0 16px; }

}
/* ここまで スマートフォン（480px 以下） */