/* モバイル向けメタタグ */
@-ms-viewport {
  width: device-width;
}

/* 高DPI端末対応 */
@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) {
  /* 高解像度向けのスタイル */
  body {
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* スマートフォン最適化 */
@media (max-width: 576px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  h1, .h1 {
    font-size: calc(1.3rem + 1.2vw) !important;
  }
  
  h2, .h2 {
    font-size: calc(1.2rem + 0.9vw) !important;
  }
  
  h3, .h3 {
    font-size: calc(1.1rem + 0.6vw) !important;
  }
  
  h4, .h4 {
    font-size: calc(1rem + 0.3vw) !important;
  }
  
  .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
  
  .form-control {
    font-size: 16px; /* iOS上でのズームを防止 */
    padding: 12px;
    height: auto;
  }
  
  input, button, select, textarea, a.btn {
    min-height: 44px; /* タップターゲットサイズを確保 */
  }
  
  /* タップハイライトの除去 */
  a, button, input, select, textarea {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
}

/* iPhoneのノッチ対応 */
@supports (padding: max(0px)) {
  body, .fixed-top, .fixed-bottom {
    padding-left: min(0vmin, env(safe-area-inset-left));
    padding-right: min(0vmin, env(safe-area-inset-right));
  }
  
  .fixed-top {
    padding-top: min(0vmin, env(safe-area-inset-top));
  }
  
  .fixed-bottom {
    padding-bottom: min(0vmin, env(safe-area-inset-bottom));
  }
}

/* タッチ操作の最適化 */
@media (hover: none) and (pointer: coarse) {
  a:hover {
    /* タッチデバイスではホバー効果を軽減 */
    transition: none;
  }
  
  .card, .btn {
    transition: opacity 0.2s ease;
  }
  
  .card:active, .btn:active {
    opacity: 0.7;
  }
}

/* 画面の向き対応 */
@media screen and (orientation: portrait) {
  /* 縦向き専用スタイル */
  .container {
    max-width: 100%;
  }
}

@media screen and (orientation: landscape) and (max-height: 576px) {
  /* 横向き（小さい高さ）専用スタイル */
  .container {
    max-width: 94%;
  }
  
  .page-header {
    padding: 2rem 0 !important;
  }
}

/* グリッドの調整 */
@media (max-width: 767px) {
  .row {
    margin-left: -10px;
    margin-right: -10px;
  }
  
  .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
  .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
  .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* セクション間の余白調整 */
@media (max-width: 576px) {
  section {
    padding: 40px 0;
  }
  
  .py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .my-5 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
  }
  
  .pt-5 {
    padding-top: 2rem !important;
  }
  
  .pb-5 {
    padding-bottom: 2rem !important;
  }
  
  .mt-5 {
    margin-top: 2rem !important;
  }
  
  .mb-5 {
    margin-bottom: 2rem !important;
  }
}

/* 画像のレスポンシブ対応 */
@media (max-width: 767px) {
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* 画像の読み込み遅延対応 */
  img[loading="lazy"] {
    transition: opacity 0.3s;
    opacity: 0;
  }
  
  img[loading="lazy"].loaded {
    opacity: 1;
  }
}

/* フォーム要素の最適化 */
@media (max-width: 767px) {
  input, textarea, select, .form-control {
    font-size: 16px; /* iOS自動ズーム防止 */
  }
  
  input[type="submit"], button[type="submit"], .btn-submit {
    width: 100%;
  }
  
  .input-group {
    display: flex;
    flex-wrap: wrap;
  }
  
  .input-group > .form-control {
    flex: 1 1 auto;
    min-height: 44px;
  }
  
  /* チェックボックスとラジオの操作性向上 */
  input[type="checkbox"], input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
  }
  
  .form-check-label {
    padding-left: 10px;
  }
}

/* モバイルナビゲーション追加改善 */
@media (max-width: 991px) {
  .navbar-nav {
    padding: 1rem 0;
  }
  
  .navbar-nav .nav-item {
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  
  .navbar-nav .nav-item:last-child {
    border-bottom: none;
  }
  
  .navbar-collapse {
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
  }
  
  /* スクロールバーのカスタマイズ */
  .navbar-collapse::-webkit-scrollbar {
    width: 3px;
  }
  
  .navbar-collapse::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
  }
}

/* 画面読込時のパフォーマンス最適化 */
@media (max-width: 767px) {
  body {
    content-visibility: auto;
    contain-intrinsic-size: 1px 5000px;
  }
  
  .lazy-section {
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px;
  }
}

/* iPhoneXなどのノッチがある端末向け */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .fixed-bottom, .footer-modern {
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  /* iOS用のスタイル修正 */
  .ios-device input[type="text"],
  .ios-device input[type="email"],
  .ios-device input[type="tel"],
  .ios-device input[type="number"],
  .ios-device input[type="password"],
  .ios-device textarea {
    -webkit-appearance: none;
    border-radius: 4px;
  }
}

/* 印刷対応 */
@media print {
  .navbar, .footer, .scroll-top-btn {
    display: none !important;
  }
  
  body {
    padding: 0;
    margin: 0;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
  }
}

/* フォントサイズの調整 */
html {
  font-size: 16px;
}

@media (max-width: 1200px) {
  html {
    font-size: 15px;
  }
}

@media (max-width: 992px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  html {
    font-size: 13px;
  }
}

/* 特定のAndroidブラウザへの対応 */
@supports (-webkit-overflow-scrolling: touch) {
  .android-browser select {
    background-image: none !important;
    padding-right: 0.5rem !important;
  }
}

/* 低速インターネット接続への対応 */
@media (prefers-reduced-data: reduce) {
  img, video {
    max-resolution: 0.5dppx;
  }
  
  .bg-image, .hero-image {
    background-size: auto;
  }
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
  .auto-dark-mode {
    background-color: #121212;
    color: #e0e0e0;
  }
  
  .auto-dark-mode a {
    color: #90caf9;
  }
}

/* RTL言語サポート */
[dir="rtl"] {
  .navbar-nav {
    padding-right: 0;
  }
  
  .dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
  }
}

/* 視覚障害者向けアクセシビリティ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}