/*
 * page-cardhowto.php（アミーゴカード会員向けページ群: /amigo/・002-2〜009-2の
 * 9ページ、body class "page-template-page-cardhowto" で共通）のSP対応。
 *
 * このテンプレートは元々titicaca-sp側でPCとは別のカスタムフィールド
 * （sp-content）をSP専用コンテンツとして参照する作りだったが、本番を
 * モバイルUAで実機確認したところ9ページ中7ページ（002-2〜008-2）で
 * sp-contentが未入力のまま本文が空白になっている既存バグを発見した。
 * ユーザー判断により、sp-contentは使わずPC版と同じthe_content()に一本化し
 * （テンプレート側は変更不要、元々the_content()のみ）、本文はCSSだけで
 * レスポンシブ化する。
 */
@media (max-width: 768px) {
  /*
   * style.cssの.edit-area{width:900px;margin:0 auto}がPC固定幅のまま無条件に
   * 効いており、SPでもページ全体が900px幅になって横スクロールが発生する
   * （他ページ（page-shops.php等）と同じ「裸のクラスセレクタがモバイルに漏れる」
   * パターン）。影響範囲をこのテンプレートに限定して上書きする。
   */
  /*
   * .edit-areaのインラインstyle（padding-top:28px）は#content側のpadding-top
   * （.sp-header分の53px、下記）と二重に効いてしまうため、SPでは0にする。
   */
  body.page-template-page-cardhowto .edit-area {
    width: 100%;
    padding-top: 0 !important;
  }
  /*
   * このテンプレート固有のインラインstyle（#content{padding-top:30px}）は
   * PC向けの余白調整で、SPで固定表示される.sp-header（53px）の高さを
   * 考慮していない。#signage等と同じ考え方で、.sp-headerの実際の高さに
   * 合わせて上書きする（インラインstyleはIDセレクタのみで!importantも
   * 無いため、こちらのクラス+ID+!importantで確実に上書きする）。
   * style.cssの#content{margin-bottom:100px}は全ページ共通のPC専用ルールで
   * 範囲指定が無く、フッター前に本番SPには無い余白を作っていたため打ち消す。
   */
  body.page-template-page-cardhowto #content {
    padding-top: 53px !important;
    margin-bottom: 0 !important;
  }
  /*
   * 本文（the_content()）はwp-admin側で自由入力されたリッチテキストで、
   * ページごとに内容は異なるが、いずれもPC幅前提の固定px指定
   * （table width="900"、img width="700"等）を含む。個別ページの内容には
   * 触れず、テンプレート単位でCSSだけを効かせて可変幅化する。
   */
  /*
   * table-layout:fixedにすると、各td/thのwidth属性（例:180+170+170+120=640px）が
   * 縮まない固定列幅として扱われ、table自体のwidth:100%より優先されてはみ出す
   * （table-layoutは既定のautoのままにし、td/th側のwidth属性をCSSで無効化して
   * ブラウザの自動縮小に任せる）。
   */
  body.page-template-page-cardhowto .edit-area table {
    width: 100% !important;
  }
  body.page-template-page-cardhowto .edit-area td,
  body.page-template-page-cardhowto .edit-area th {
    width: auto !important;
    word-break: break-word;
  }
  body.page-template-page-cardhowto .edit-area img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
  }
  /*
   * 本番titicaca-sp側をモバイルUAで実機計測（Playwright）した基準値
   * （font-size:13px、line-height:1.7、color:#333、Meiryo優先のfont-family）に
   * 合わせる。style.css側のPC基準（14px/1.5/#3a1d1d、Hiragino優先）が
   * bodyへ無条件に効いているため、このテンプレートに限定して上書きする。
   */
  body.page-template-page-cardhowto {
    font-size: 13px;
    line-height: 1.7;
    color: #333;
    font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Osaka', Arial, sans-serif;
  }
  /*
   * the_content()の先頭にある「■アミーゴカードのご案内/よくあるご質問/会員規約/
   * お問い合わせ」の4列ナビ表は、本番titicaca-sp側のsp-content（実機確認済み）には
   * 元々含まれておらずPC版だけの要素だった。9ページとも.edit-area内のtableは
   * このナビ表とtable.card-menu（ピンクのタイトルバー）の2つのみのため、
   * card-menuではない方のtableを対象にすれば安全に非表示にできる
   * （:first-childで狙おうとすると、本文中の壊れたHTML（閉じ忘れの</a>由来の
   * 空<p>タグ）がブラウザのfoster parentingでtableより前に押し出され、実際の
   * DOM上ではtableが最初の子要素にならないページがあり機能しなかったため、
   * より頑健なこの方法に変更）。直後の空白調整用<p>&nbsp;</p>も併せて隠す。
   */
  body.page-template-page-cardhowto .edit-area table:not(.card-menu),
  body.page-template-page-cardhowto .edit-area table:not(.card-menu) + p {
    display: none;
  }
  /*
   * 本番titicaca-sp側のsp-contentは「■アミーゴカードとは」以降の本文全体を
   * <div style="width:90%;margin:0 auto;">で囲んでおり、ピンクのタイトルバー
   * （table.card-menu）だけは画面幅いっぱいのまま、それ以降の本文にだけ左右の
   * 余白が付く。the_content()側には同等のラップ要素が無いため、card-menu以降の
   * 各要素に個別に同じ余白を与えて再現する。
   */
  body.page-template-page-cardhowto .edit-area > table.card-menu ~ * {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  /*
   * このページのPDFリンクが本テーマ共通のブランドピンク+下線
   * （style.cssのa{color:#e60a84;text-decoration:underline}、サイト全体に
   * 無条件で効く）で表示されていたが、本番titicaca-sp側はcommon.cssに
   * a{text-decoration:none}しか無くcolor指定が無いため、ブラウザ既定の
   * リンク色（実測rgb(0,0,238)、下線なし）がそのまま出ている。本番の
   * 実際の表示に合わせる（意図的なブランド配色ではなく本番側の未スタイル
   * 状態だが、本番実機の見た目を優先する）。
   */
  body.page-bulletin .edit-area a {
    color: #0000ee;
    text-decoration: none;
  }

  /*
   * ユーザー指示により本文（.edit-area）の上下に余白を追加。
   * padding-topはbody.page-template-page-cardhowto .edit-area{padding-top:0
   * !important}（このファイル内、上部）が!important付きで先に効いているため、
   * 同じ!importantで上書きする。
   */
  body.page-bulletin .edit-area {
    padding-top: 40px !important;
    padding-bottom: 40px;
  }
}