/*
 * page.php（汎用ページテンプレート。/company/・/company/philosophy/・
 * /company/message/・/company/project/ 等、専用テンプレートを持たない
 * 会社概要系ページ全般が共有）のSP対応。
 * 対象ページの絞り込みはWordPressが自動付与するbody class
 * "page-template-default"（カスタムテンプレート未指定の目印）を使う。
 * これにより、独自テンプレートを持つ他ページ（page-shops.php等）の
 * .site-nav--sp .edit-area等には影響しない。
 */
@media (max-width: 768px) {
  body.page-template-default .site-nav--sp.visual {
    position: relative;
    overflow: hidden;
  }
  body.page-template-default .site-nav--sp.visual img {
    display: block;
  }
  /*
   * 本番titicaca-spを実機（モバイルUA+Playwright）で計測して検証。本番は
   * .visual自体ではなく親の.contents{padding-top:53px}（.sp-header分の
   * クリアランス）がこの余白を作っており、.visual自身は無加工。そのため
   * .visualの実際のボックスは.contentsのpaddingで既にy=53px相当まで
   * 押し下げられた状態にあり、.flag（position:absolute）はその押し下げ後の
   * .visualの境界を基準に top:-45px（最終的な画面上の位置はy=53-45=8px）。
   * 本テーマには.contents相当の共通ラッパーが無いため、.visual自身に
   * padding-top:53pxを付与して同じ見た目を再現しているが、この場合.visual
   * 自体のボックスはy=0のまま変わらない（padding-topは自身の内側の余白であり、
   * position:absoluteの子要素の基準点＝自身のpadding box自体の位置は
   * 動かないため）。よって.flagの基準点が本番と異なり、本番と同じ画面上の
   * 位置（y=8px）に合わせるにはtop:8px（0+8）が必要（実機測定で本番のimg
   * top=53px・flag top=8pxと本実装が一致することを確認済み）。
   */
  body.page-template-default .site-nav--sp.visual {
    padding-top: 53px;
  }
  /*
   * titicaca-sp/css/common.cssのグローバルリセット`h1,h2,h3,h4,h5,h6{margin:0}`
   * が本プロジェクトでは未移植のため、.visual__img（h2要素）にブラウザ既定の
   * marginが残り、本番より画像位置が下にずれていた（本番実測: img top=53px、
   * 本実装: 70px。差分約17pxがh2の既定marginと一致）。
   */
  body.page-template-default .site-nav--sp.visual .visual__img {
    margin: 0;
  }
  body.page-template-default .site-nav--sp.visual .visual__img img {
    width: 100%;
    height: auto;
  }
  body.page-template-default .site-nav--sp.visual .flag {
    width: 100%;
    position: absolute;
    top: 8px;
  }

  body.page-template-default .site-nav--sp.contents-wrap {
    padding: 40px 0;
    position: relative;
  }
  /*
   * style.cssの.edit-area{width:900px;margin:0 auto}がPC固定幅のまま無条件に
   * 効いており、SPでもページ全体が900px幅になって横スクロールが発生する
   * （他ページと同じ「裸のクラスセレクタがモバイルに漏れる」パターン）。
   */
  /*
   * style-company.cssの`body.page-company .edit-area{position:relative}`は
   * PC版the_content()内の.edit-areaを想定したルールだが、クラス名（.edit-area）
   * がSP版sp-contentの#company-info等と共有されているため漏れて適用されていた。
   * 本番実機計測したところ本番の#company-info（.edit-area）はposition:static
   * のままで、.icon.birds等position:absoluteの装飾アイコンは親の.edit-areaでは
   * なく.contents-wrap（position:relative）を基準に位置決めされていた。
   * position:relativeが漏れて基準がずれ、アイコンが本来より
   * .contents-wrapのpadding-top分（40px）下にずれて表示されていたため、
   * 明示的にstaticへ戻す。
   */
  /*
   * style-company.cssの`body.page-company #company-info{padding-bottom:80px}`が
   * ID一致でSP側にも漏れていた（本番実機計測: padding-bottom:0）。
   */
  body.page-template-default .site-nav--sp #company-info {
    padding-bottom: 0;
  }
  body.page-template-default .site-nav--sp .edit-area {
    position: static;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    font-size: 12px;
  }
  body.page-template-default .site-nav--sp .edit-area:first-child i + * {
    margin-top: 0;
  }
  /*
   * style.cssの裸の`.edit-area h2{margin:0 0 0.8em;padding-top:2.8em;
   * text-align:center}`（範囲指定なしの全ページ共通ルール）が、同じクラス名
   * 経由でSP側にも漏れていた（marginは既に上書き済みだったが、padding-top・
   * text-alignは見落としていた）。本番実機計測（padding-top:0、
   * text-align:start）に合わせて明示的に打ち消す。
   */
  body.page-template-default .site-nav--sp .edit-area h2 {
    margin: 0 0 30px;
    padding-top: 0;
    text-align: left;
    line-height: 1;
  }
  body.page-template-default .site-nav--sp .edit-area h2 img {
    max-width: 100%;
    height: auto;
  }
  body.page-template-default .site-nav--sp .edit-area h3 {
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 15px;
    color: #3a1d1d;
  }
  body.page-template-default .site-nav--sp .edit-area a:hover img {
    opacity: 0.8;
  }
  body.page-template-default .site-nav--sp .edit-area p {
    line-height: 1.9;
  }
  /*
   * .boldクラス自体が本テーマで未定義だったため（.mt10〜.mt40と同じパターン）、
   * /company/message/のsp-content中の強調段落（p.bold、代表メッセージの
   * キーフレーズ3箇所）が太字にならず通常のウェイトで表示されていた
   * （ユーザー報告「太文字が消えている」により発覚）。本番実機計測値
   * （font-weight:700、color:#3a1d1d。他要素（h3等）と同じこのテンプレート
   * 共通の強調色）に合わせる。
   */
  body.page-template-default .site-nav--sp .edit-area p.bold {
    font-weight: bold;
    color: #3a1d1d;
  }
  body.page-template-default .site-nav--sp .edit-area img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  body.page-template-default .site-nav--sp .edit-area hr {
    height: 1px;
    border-top: 1px dotted #3a1d1d;
    margin: 30px 0;
    background: none;
  }
  body.page-template-default .site-nav--sp .edit-area ul {
    margin-left: 20px;
    margin-bottom: 20px;
    padding: 0;
  }
  /*
   * style-company.cssの`body.page-philosophy .edit-area ul{font-size:16px;
   * line-height:2.25}`はPC版のリスト表示用ルールだが、.site-nav--pc等での
   * 範囲指定が無くbody.page-philosophyというページ全体スコープのため、SP側にも
   * 無条件に効いていた。本番実機計測（12px/line-height:20.4px=12×1.7、
   * .edit-area自体の基準値と同じ）に合わせて明示的に打ち消す（ユーザー報告
   * 「文字が大きく間延びしてる」により発覚）。
   */
  body.page-philosophy .site-nav--sp .edit-area ul {
    font-size: 12px;
    line-height: 1.7;
  }
  /*
   * style-company.cssの`body.page-philosophy .edit-area ul li{position:relative;
   * padding-left:0.7em}`+`ul li:before{content:"・";position:absolute;...}`は
   * PC版専用の独自「・」ドット装飾だが、こちらも.site-nav--pc等の範囲指定が無く
   * SP側にも漏れていた。本番titicaca-sp実機計測の結果、SP側はこのカスタム
   * ドット自体を持たず、style.cssの全体リセット(ul,ol{list-style:none})より前の
   * ブラウザ既定のディスクマーカー(list-style-type:disc)がそのまま使われている
   * ことが判明（PC/SP間の意図的な差異と思われる。ユーザー指摘「・のスタイルが
   * 本番と異なる」により発覚）。SP側はカスタムドットを打ち消し、既定の
   * ディスクマーカーに戻す。
   */
  body.page-philosophy .site-nav--sp .edit-area ul li {
    position: static;
    padding-left: 0;
    list-style-type: disc;
  }
  body.page-philosophy .site-nav--sp .edit-area ul li:before {
    content: none;
  }
  body.page-template-default .site-nav--sp .edit-area ul li {
    margin-bottom: 5px;
  }
  body.page-template-default .site-nav--sp .edit-area iframe {
    max-width: 100%;
  }

  /*
   * style-company.cssの`body.page-project .edit-area p{font-size:16px;
   * line-height:1.87;letter-spacing:1px}`はPC版（.dasharea装飾ボックス内）用の
   * ルールだが、.site-nav--pc等の範囲指定が無くSP側にも無条件に効いていた
   * （page-philosophyの.edit-area ulと同じ漏れパターン）。本番titicaca-sp実機
   * 計測値（12px/line-height:22.8px=12×1.9、letter-spacing無し）に合わせて
   * 明示的に打ち消す（ユーザー指摘「事業紹介ページも大きい」により発覚）。
   */
  body.page-project .site-nav--sp .edit-area p {
    font-size: 12px;
    line-height: 1.9;
    letter-spacing: normal;
  }

  /*
   * style-company.cssの`body.page-message .edit-area p{font-size:16px;
   * line-height:2.25}`（PC版の代表メッセージ本文用）も同じ漏れパターンで
   * SP側に無条件に効いていた。本番実機計測値（12px/line-height:22.8px=12×1.9、
   * page-project等と同じSP基準比率）に合わせて明示的に打ち消す。
   * p.sign（署名の大きな手書き風文字、font-size:30px）はSP側のsp-content
   * には存在しない要素のため対象外（実機確認済み）。
   */
  body.page-message .site-nav--sp .edit-area p {
    font-size: 12px;
    line-height: 1.9;
  }

  /* 装飾アイコン（sp-content側のリッチテキストが直接参照するクラス） */
  body.page-template-default .site-nav--sp .edit-area i {
    position: absolute;
  }
  body.page-template-default .site-nav--sp .edit-area i.birds {
    right: 20px;
    top: 8px;
    background: url("../images/company/icon_birds.png");
    background-size: 90px 30px;
    width: 90px;
    height: 30px;
  }
  body.page-template-default .site-nav--sp .edit-area i.human {
    right: 20px;
    top: 10px;
    background: url("../images/company/icon_human.png");
    background-size: 32px 35px;
    width: 32px;
    height: 35px;
  }
  body.page-template-default .site-nav--sp .edit-area i.flower {
    right: 5px;
    top: -10px;
    background: url("../images/company/icon_flower.png");
    background-size: 55px 39px;
    width: 55px;
    height: 39px;
  }
  body.page-template-default .site-nav--sp .edit-area i.flower2 {
    left: -8px;
    top: 0;
    background: url("../images/company/icon_flower2.png");
    background-size: 48px 38px;
    width: 48px;
    height: 38px;
    display: block;
    position: relative;
  }
  body.page-template-default .site-nav--sp .edit-area i.flower3 {
    margin: 0 0 0 auto;
    background: url("../images/company/icon_flower3.png");
    background-size: 66px 42px;
    width: 66px;
    height: 42px;
    display: block;
    position: relative;
  }

  /*
   * 会社情報テーブル（商号・代表・本社等）はPCの横並びではなく1行ずつ縦積みにする。
   * page.phpは会社概要系の複数ページ（company/philosophy/message/project）で
   * 共有される汎用テンプレートで、body classは実際に読み込まれるファイルとは
   * 無関係にDBのテンプレート未割り当てを示す"page-template-default"になる。
   * page-history.php等、別の専用テンプレートファイルを持つページも同じ
   * body classを共有してしまうため、page.php側でしか出力されない
   * #company-info（id="company-info"のテーブル）に限定して当てる
   * （以前は.edit-area table全体に効かせており、page-history.phpの
   * テーブルにまで漏れてtr間に不要なpadding-bottomができる不具合があった）。
   */
  body.page-template-default .site-nav--sp #company-info table {
    width: 100%;
  }
  body.page-template-default .site-nav--sp #company-info table tr {
    padding-bottom: 30px;
    display: block;
    line-height: 1;
  }
  /*
   * 本番titicaca-spを実機計測したところ、tr{display:block}であってもth/tdは
   * display:table-cellのまま（ブラウザがtable-cell同士を自動で補完し横並び
   * にする仕組み）だった。th側だけdisplay:inline-blockにすると、この
   * 補完の対象から外れてtd（table-cellのまま）が改行され縦積みになって
   * しまっていたため、th/tdとも本番と同じtable-cellのまま扱う。
   */
  body.page-template-default .site-nav--sp #company-info table tr th {
    width: 80px;
    text-align: left;
    vertical-align: top;
    line-height: 1.6;
  }
  /*
   * PC版the_content()のテーブル（#company-info）とSP版sp-contentのテーブルが
   * 同じid="company-info"を使っており（本文側の既存仕様で、テーマ側からは
   * 変更できない）、style-company.cssの`body.page-company #company-info
   * table{font-size:16px;margin-top:2em;margin-bottom:3em;line-height:2em}`・
   * `table th{width:150px;padding-left:55px;...}`というPC専用ルールがID一致で
   * SP側にも漏れていた（見出しの右ずれに加えて、本来12pxのはずの文字サイズが
   * 16pxになっていた）。IDセレクタを上回る詳細度で明示的に打ち消す。
   */
  body.page-template-default .site-nav--sp #company-info table {
    font-size: 12px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.7 !important;
  }
  body.page-template-default .site-nav--sp #company-info table th {
    width: 80px !important;
    padding-left: 0 !important;
    padding-top: 1px !important;
    box-sizing: content-box !important;
    text-align: left !important;
  }
  body.page-template-default .site-nav--sp #company-info table td {
    padding-top: 1px !important;
  }
  body.page-template-default .site-nav--sp #company-info table tr td {
    line-height: 1.6;
    vertical-align: top;
  }

  /*
   * style.cssの#content{margin-bottom:100px}は全ページ共通のPC専用ルールで
   * 範囲指定が無く、フッター前に本番SPには無い余白を作っていたため打ち消す
   * （他の統合済みページと同じ理由）。
   */
  body.page-template-default #content {
    margin-bottom: 0 !important;
  }
  /*
   * 本番titicaca-spをモバイルUA+Playwrightで実測した基準値（font-size:13px、
   * line-height:1.7、color:#333、Meiryo優先のfont-family。page-cardhowto.phpと
   * 同じ値でサイト共通のSP基準と判明）に合わせる。style.css側のPC基準
   * （14px/1.5/#3a1d1d、Hiragino優先）がSP側にも無条件に効いていたため、
   * このテンプレートに限定して上書きする。
   */
  body.page-template-default {
    font-size: 13px;
    line-height: 1.7;
    color: #333;
    font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Osaka', Arial, sans-serif;
  }

  /*
   * .mt10〜.mt40ユーティリティクラス自体が本テーマで未定義だったため
   * （page-convey.php対応時に発見した同種パターン）、/company/philosophy/の
   * PDFダウンロードボタン2つ（img.btn-download、それぞれmt30/mt10指定）の
   * 間隔が付かず、ボタンが隙間なく連続して表示されていた（ユーザー報告により
   * 発覚）。page.phpは会社概要系の複数ページで共有される汎用テンプレートで、
   * 同じmt*クラスは他ページのsp-contentでも使われ得るため、page-convey.php等と
   * 同じ値でこのテンプレート共通のスコープに定義する。
   */
  body.page-template-default .site-nav--sp .mt10 { margin-top: 10px; }
  body.page-template-default .site-nav--sp .mt20 { margin-top: 20px; }
  body.page-template-default .site-nav--sp .mt30 { margin-top: 30px; }
  body.page-template-default .site-nav--sp .mt40 { margin-top: 40px; }
}

/*
 * .company-nav（会社概要関連ページのフッター直前のSP専用ページ間ナビ、
 * footer.php参照）。titicaca-sp/css/company.cssから移植。
 * page-template-default以外のページ（history等、独自テンプレートを持つ
 * ページ）でも表示され得るため、page-template-defaultでスコープしない。
 */
@media (max-width: 768px) {
  .site-nav--sp.company-nav .company-nav-bg {
    margin: 0;
    background: url("../images/company/company-nav-bg.png") repeat-x;
    background-size: 31px 60px;
    padding-left: 20px;
  }
  /*
   * imgのwidth/height属性（84×16）が実ファイル（168×36、2倍書き出し）の
   * アスペクト比と一致しておらず、かつdisplay/vertical-align未指定のため
   * インライン画像特有のベースライン下の余白も加わり、本番の高さ60px
   * （画像18px+padding21px×2）に対してこちらは69px前後になっていた。
   * height:autoで正しい比率（84px幅→18px）に補正し、display:blockで
   * 余分な行送り分の余白を無くす。
   */
  .site-nav--sp.company-nav .company-nav-bg img {
    display: block;
    height: auto;
    padding: 21px 0;
  }
  .site-nav--sp.company-nav ul {
    margin: 0;
    padding: 0;
  }
  .site-nav--sp.company-nav ul::after {
    content: " ";
    display: table;
    clear: both;
  }
  .site-nav--sp.company-nav ul li {
    list-style-type: none;
    width: 50%;
    float: left;
  }
  .site-nav--sp.company-nav ul li a {
    display: block;
    padding: 20px 5%;
    width: 90%;
  }
  .site-nav--sp.company-nav ul li a img {
    max-width: 100%;
    height: auto;
  }
  .site-nav--sp.company-nav ul li.odd {
    background: url("../images/company/nav-bg-right.png") repeat-y right top,
      url("../images/company/nav-bg-top.png") repeat-x left top,
      url("../images/company/nav-bg-bottom.png") repeat-x left bottom;
    background-size: 3px 8px, 8px 3px, 8px 3px;
  }
  .site-nav--sp.company-nav ul li.even {
    background: url("../images/company/nav-bg-left.png") repeat-y left top,
      url("../images/company/nav-bg-top.png") repeat-x left top,
      url("../images/company/nav-bg-bottom.png") repeat-x left bottom;
    background-size: 3px 8px, 8px 3px, 8px 3px;
  }
}