/* ============================================================
   CRK 共通スタイル (crk-common.css)
   2026-08-07 作成

   このファイル1つを修正すれば、読み込んでいる全ページに反映されます。
   各HTMLの </head> の直前に次の1行を入れて読み込んでください:
   <link rel="stylesheet" href="crk-common.css?v=1">

   ※ 内容を変更したら v=1 を v=2 に上げてください(キャッシュ対策)
   ============================================================ */

@media (max-width: 820px) {

  /* ------------------------------------------------------------
     スマホメニューの視認性修正

     根本原因: ヘッダーの backdrop-filter(すりガラス効果)は
     CSS仕様上、内部の position:fixed 要素をヘッダー自身の高さ
     (72px)の中に閉じ込めてしまう。そのためメニューが正しく
     展開されず、背景と混ざって読めない状態になっていた。
     ------------------------------------------------------------ */
  .header {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 1300 !important;
  }

  .nav {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: -10px 0 40px rgba(26, 26, 26, .28) !important;
    width: min(82vw, 340px) !important;
    padding: 24px 26px !important;
    gap: 0 !important;
    overflow-y: auto !important;
  }

  .nav a {
    width: 100% !important;
    padding: 15px 0 !important;
    font-size: 15.5px !important;
    color: #1A1A1A !important;
    border-bottom: 1px solid #E8E2D6 !important;
  }

  .nav a:not(.btn-consult)::after { display: none !important; }

  .nav .btn-consult {
    background: #B08D4C !important;
    color: #FFFFFF !important;
    text-align: center !important;
    padding: 16px 0 !important;
    margin-top: 16px !important;
    border-bottom: none !important;
  }

  /* メニュー展開中に背後を暗くする幕(JSで自動生成) */
  #navOverlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 20, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s;
    z-index: 1100;
  }
  #navOverlay.on { opacity: 1; visibility: visible; }

  /* ------------------------------------------------------------
     ブログ一覧: 記事カードを縦積みにして左右の余白を確保
     ------------------------------------------------------------ */
  .article { grid-template-columns: 1fr !important; }
  .article-thumb { min-height: 0 !important; aspect-ratio: 16/10; }
  .article-body { padding: 22px 20px 24px !important; }
  .article-body h2 { font-size: 17px; line-height: 1.65; }
  .article-excerpt { font-size: 13px; line-height: 1.9; }
  .blog-layout { padding: 36px 0 56px; gap: 44px; }
  .side-box { padding: 24px 20px; }

  /* ------------------------------------------------------------
     記事本文: 端に張り付かないよう左右余白を確保
     ------------------------------------------------------------ */
  .art-body { padding-left: 20px !important; padding-right: 20px !important; }
  .art-body h1 { font-size: 23px; line-height: 1.6; }
  .art-body h2 { font-size: 18px; }
  .art-body p { font-size: 14.5px; line-height: 2.05; }
  .toc { padding: 20px 18px; }

  /* ------------------------------------------------------------
     料金表: ラベルと内容を縦積みにして文字の縦潰れを防ぐ
     ------------------------------------------------------------ */
  .profile-table,
  .profile-table tbody,
  .profile-table tr,
  .profile-table th,
  .profile-table td { display: block; width: 100%; }
  .profile-table tr { border-bottom: 1px solid #E8E2D6; }
  .profile-table th {
    white-space: normal;
    border-bottom: none;
    padding: 15px 16px 7px;
    background: #FCFBF9;
    font-size: 13.5px;
  }
  .profile-table td { border-bottom: none; padding: 0 16px 16px; font-size: 14px; }

  /* ------------------------------------------------------------
     入力欄: iOSの自動ズームを防ぐ(16px未満だと拡大される)
     ------------------------------------------------------------ */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  select,
  textarea { font-size: 16px !important; }
}