/* ================================================================
 * Marriage Agency Harmony - Mobile Optimization
 * 2026-06-10 / 元 common.css に影響しない追加スタイル
 * 主要対応：375px〜480px（スマホ）、481px〜768px（タブレット狭）
 * ================================================================ */

/* ====== Tablet narrow (≤ 900px) 微調整 ====== */
@media (max-width: 900px){
  body.mah-body{
    font-size: 15px;
    line-height: 1.7;
  }
  :root{
    --section-y: 64px;
    --section-y-sm: 40px;
  }
  /* Hero パディング縮小 */
  .mah-hero{
    padding: 80px 16px 60px !important;
    min-height: auto !important;
  }
  .mah-hero .mah-hero-top{
    font-size: 18px !important;
    margin: 0 0 12px;
  }
  /* H1（メインキャッチ）*/
  .mah-hero .mah-h-seo{
    font-size: clamp(20px, 4.5vw, 28px) !important;
    line-height: 1.4 !important;
    padding: 0 8px !important;
    margin: 8px 0 !important;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  /* You & Japanese man（装飾テキスト）*/
  .mah-hero .mah-h-romantic{
    font-size: clamp(34px, 8vw, 58px) !important;
    line-height: 1.1 !important;
    margin-top: 12px !important;
  }
  /* hero-sub */
  .mah-hero .mah-hero-sub{
    font-size: 14px !important;
    margin-top: 18px !important;
    padding: 0 16px;
  }
}

/* ====== Mobile (≤ 768px) ====== */
@media (max-width: 768px){
  /* セクション間隔をコンパクトに */
  .mah-section{ padding: 56px 0 !important; }
  .mah-section-sm{ padding: 36px 0 !important; }

  /* ヘッダー縮小 */
  .mah-header-inner{
    height: 56px !important;
    padding: 0 14px !important;
  }
  .mah-logo img{ height: 32px !important; }

  /* ナビ：横スクロール対応 */
  .mah-nav{
    gap: 16px !important;
    font-size: 13px;
  }
  .mah-nav a{ font-size: 13px !important; }

  /* 2列・3列・4列グリッド：強制1列化 */
  .mah-2col,
  .mah-3col,
  .mah-cards-4,
  .mah-contact-grid,
  .mah-couple{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .mah-couple{
    padding: 36px 16px !important;
  }
  .mah-couple .photo{
    width: 180px !important;
    max-width: 60vw;
  }
  .mah-couple .amp{ font-size: 56px !important; }

  /* スタッフグリッド：1列 */
  .mah-staff-grid{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 16px !important;
  }

  /* ブログカード：1列 */
  .mah-blog-grid{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 16px !important;
  }

  /* タップ領域確保（最低44px×44px：iOS HIG / Material 推奨）*/
  .mah-btn,
  .mah-nav a,
  .mah-footer .links a,
  button,
  input[type="submit"]{
    min-height: 44px;
    line-height: 1.4;
    padding: 12px 20px;
    font-size: 15px;
  }

  /* フォーム：iOS ズーム回避（16px 必須）*/
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  textarea,
  select{
    font-size: 16px !important;
    padding: 12px 14px !important;
    border-radius: 6px;
  }
  textarea{ min-height: 120px; }

  /* フッター */
  .mah-footer{
    padding: 36px 16px !important;
    font-size: 13px;
  }
  .mah-footer img{ height: 48px !important; }
  .mah-footer .links{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 18px 0;
  }

  /* H2/H3 サイズ */
  h2.mah-h-main,
  .mah-h-main{
    font-size: clamp(20px, 5.5vw, 26px) !important;
    line-height: 1.4 !important;
    padding: 0 16px;
  }

  /* 画像はコンテナ幅100% */
  .mah-2col img,
  .mah-section img{
    width: 100%;
    height: auto;
  }

  /* 横スクロールバー対策 */
  html, body{ overflow-x: hidden; }
  body.mah-body{ width: 100%; max-width: 100vw; }

  /* TO TOP ボタン */
  .mah-totop{
    right: 16px !important;
    bottom: 16px !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* Astra ハイジャック対策：本文余白を縮小 */
  body.mah-body article.ast-article-single{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ====== Small mobile (≤ 480px) ====== */
@media (max-width: 480px){
  body.mah-body{ font-size: 14px; }
  :root{
    --section-y: 48px;
    --section-y-sm: 32px;
  }

  /* Hero さらにコンパクト */
  .mah-hero{
    padding: 60px 12px 48px !important;
  }
  .mah-hero .mah-hero-top{
    font-size: 16px !important;
  }
  .mah-hero .mah-h-seo{
    font-size: clamp(18px, 5vw, 22px) !important;
    padding: 0 4px !important;
  }
  .mah-hero .mah-h-romantic{
    font-size: clamp(28px, 9vw, 44px) !important;
    margin-top: 10px !important;
  }
  .mah-hero .mah-hero-sub{
    font-size: 13px !important;
    margin-top: 14px !important;
    line-height: 1.7;
  }

  /* セクション */
  .mah-section{ padding: 40px 0 !important; }
  .mah-section-sm{ padding: 28px 0 !important; }

  /* ナビ：縦並び化 or hamburger 化推奨 */
  .mah-nav{
    gap: 10px !important;
  }
  .mah-nav a{
    font-size: 12px !important;
    letter-spacing: .02em !important;
  }

  /* couple セクション */
  .mah-couple{
    padding: 28px 12px !important;
    gap: 16px !important;
  }
  .mah-couple .photo{
    width: 150px !important;
  }
  .mah-couple .amp{ font-size: 44px !important; }

  /* スタッフ写真 */
  .mah-staff-grid .photo{
    width: 130px !important;
    height: 130px !important;
  }

  /* h2/h3 */
  h2.mah-h-main,
  .mah-h-main{
    font-size: clamp(18px, 5vw, 22px) !important;
    padding: 0 12px;
  }

  /* 余白縮小 */
  .mah-section > *{
    padding-left: 12px;
    padding-right: 12px;
  }

  /* フッター */
  .mah-footer{
    padding: 28px 12px !important;
    font-size: 12px;
  }
  .mah-footer img{ height: 40px !important; }
}

/* ====== ランドスケープ専用（横長スマホ）====== */
@media (max-width: 900px) and (orientation: landscape){
  .mah-hero{
    min-height: auto !important;
    padding: 40px 16px !important;
  }
}


/* ====== タップハイライト無効化（iOS/Android の青/グレー）====== */
.mah-burger,
.mah-burger *,
.mah-nav a,
.mah-btn,
button,
a{
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
}

/* ハンバーガー：ベースリセット＋アクティブ時 */
.mah-burger{
  background: transparent !important;
  border: none !important;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding: 10px;
}
.mah-burger:focus,
.mah-burger:focus-visible,
.mah-burger:active,
.mah-burger:hover{
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.mah-burger:focus-visible{
  /* キーボードアクセシビリティのみアウトライン残す */
  outline: 2px solid var(--accent, #bc8c96) !important;
  outline-offset: 2px;
}
/* span（バーガーの線）が青くなる場合の対策 */
.mah-burger span{
  background-color: var(--text, #1f1d1c) !important;
  transition: background-color .2s, transform .2s;
}
.mah-burger[aria-expanded="true"] span{
  background-color: var(--accent, #bc8c96) !important;
}

/* ボタン全般：iOS/Android のデフォルト見た目をリセット */
button:focus,
button:active{
  outline: none;
  -webkit-tap-highlight-color: transparent !important;
}


/* ====== couple セクション 中央の「&」と上下余白を圧縮 ====== */
@media (max-width: 768px){
  /* グリッド本体の縦間隔を詰める */
  .mah-couple{
    gap: 12px !important;
    padding: 24px 12px !important;
  }
  /* 「&」のフォントサイズを小さく＋余白なし */
  .mah-couple .amp{
    font-size: 32px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* 各 person の縦余白を圧縮 */
  .mah-couple .person{
    margin: 0 !important;
  }
  .mah-couple .photo{
    width: 140px !important;
    margin: 0 auto 8px !important;
  }
  /* 名前下のハート余白圧縮（あれば）*/
  .mah-couple .person p,
  .mah-couple .person figcaption{
    margin: 4px 0 !important;
  }
  .mah-couple .person .heart,
  .mah-couple .person .mah-heart{
    margin: 4px auto !important;
    font-size: 18px !important;
  }
}

@media (max-width: 480px){
  .mah-couple{
    gap: 8px !important;
    padding: 18px 8px !important;
  }
  .mah-couple .amp{
    font-size: 26px !important;
  }
  .mah-couple .photo{
    width: 120px !important;
    margin: 0 auto 6px !important;
  }
}


/* ====== couple セクション 「&」を水平中央配置 ====== */
@media (max-width: 768px){
  /* グリッドアイテムを中央寄せ */
  .mah-couple{
    justify-items: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  /* 「&」要素そのものを中央配置 */
  .mah-couple .amp{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    display: block !important;
    justify-self: center !important;
  }
  /* person ブロックも中央 */
  .mah-couple .person{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }
}


/* ====== Hero スライダー文字 重なり修正（スマホのみ）====== */
@media (max-width: 768px){
  /* 親 hero を flex column に強制 */
  .mah-hero{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 14px !important;
    padding: 70px 16px 50px !important;
    min-height: 70vh !important;
  }

  /* 各テキスト要素を独立ブロックに */
  .mah-hero > *{
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    float: none !important;
    display: block !important;
  }

  /* hero-top */
  .mah-hero .mah-hero-top{
    font-size: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
  }

  /* H1（インラインstyle 上書き）*/
  .mah-hero .mah-h-seo,
  .mah-hero h1.mah-h-seo,
  .mah-hero h1[class*="mah-h-seo"]{
    font-size: clamp(18px, 4.5vw, 24px) !important;
    line-height: 1.45 !important;
    padding: 0 6px !important;
    margin: 6px 0 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  /* You & Japanese man（装飾フォント）*/
  .mah-hero .mah-h-romantic,
  .mah-hero p.mah-h-romantic,
  .mah-hero p[class*="mah-h-romantic"]{
    font-size: clamp(32px, 8vw, 48px) !important;
    line-height: 1.15 !important;
    margin: 10px 0 !important;
    padding: 0 !important;
  }

  /* hero-sub */
  .mah-hero .mah-hero-sub{
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin: 14px auto 0 !important;
    padding: 0 8px !important;
    max-width: 100% !important;
  }
  .mah-hero .mah-hero-sub br{ display: inline; }
}

@media (max-width: 480px){
  .mah-hero{
    padding: 50px 12px 36px !important;
    gap: 10px !important;
    min-height: auto !important;
  }
  .mah-hero .mah-hero-top{
    font-size: 14px !important;
  }
  .mah-hero .mah-h-seo,
  .mah-hero h1.mah-h-seo{
    font-size: clamp(16px, 4.8vw, 20px) !important;
    line-height: 1.45 !important;
    padding: 0 4px !important;
  }
  .mah-hero .mah-h-romantic,
  .mah-hero p.mah-h-romantic{
    font-size: clamp(26px, 9vw, 38px) !important;
    line-height: 1.15 !important;
    margin: 8px 0 !important;
  }
  .mah-hero .mah-hero-sub{
    font-size: 12px !important;
    margin: 10px auto 0 !important;
  }
}