/*
 * modules/mobile.css — サイト共通のスマホ基盤
 *
 * ヘッダー／フッター／各セクションのレイアウトは各モジュール側。
 * ここではユーティリティ・パンくず・フォーム・モーダル時の補助のみ。
 */

.u-touch-target {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
}

.u-touch-hit {
  position: relative;
}

.u-touch-hit::before {
  content: '';
  position: absolute;
  inset: calc((var(--touch-min) - 100%) / -2);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
}

@media (max-width: 900px) {
  .breadcrumb {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .breadcrumb ol {
    gap: 6px;
    font-size: 0.72rem;
    line-height: 1.45;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .breadcrumb ol::-webkit-scrollbar {
    display: none;
  }

  .breadcrumb li {
    flex-shrink: 0;
  }

  .page-content__title {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    margin-bottom: var(--space-24);
  }

  /* iOS: 16px 未満だと入力フォーカスでズームする */
  input[type='text'],
  input[type='email'],
  input[type='tel'],
  input[type='url'],
  input[type='number'],
  input[type='search'],
  input[type='password'],
  select,
  textarea {
    font-size: max(16px, 1em);
  }

  @media (prefers-reduced-motion: reduce) {
    .axihub-wm::after,
    .axihub-pickup__watermark::after {
      animation: none;
    }
  }
}