/* * page-interview.php（社員インタビュー、interview01/interview02共通）のSP対応。 * page-qa.phpと同じrecruit系独立HTMLページで、recruit/style.cssの裸のセレクタ * （.edit-area等）がSP側にも漏れる同種の問題を持つ。本文はPC/SPとも本番実測で * 素朴な//タグによるWYSIWYG装飾のみで、h2/h3等の見出し要素は * 使われていない（見出しCSSは不要）。 */ @media (max-width: 768px) { body.interview { width: 100%; min-width: 0; font-size: 13px; line-height: 1.7; color: #333; font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Osaka', Arial, sans-serif; } /* * recruit/style.cssの#container{background:#ffffff}はPC専用の白背景だが、 * IDセレクタでSP側の#containerにも無条件に効いてしまい、bodyのクリーム色の * 壁紙（bg.gif）を覆い隠して.sp-main-wrapの装飾パターン（interview-bg.png）の * 背後が白く見えてしまっていた（ユーザーが本番と見比べて発覚。本番titicaca-sp側は * そもそも#containerという要素が無く、bodyの壁紙がそのまま透けて見える）。 */ body.interview #container { background: transparent; } /* * PC版#signageに相当するSP用タイトル画像。本番titicaca-sp/css/recruit.cssの * .interview-head{background:url(interview-title-bg.png) repeat-x; * background-size:auto 60px}相当。本番はheaderが非fixedのためmargin/padding * 無しで済むが、本統合ではposition:fixedの.sp-header（実際の高さ53px）に隠れ * ないよう、page-qa.php・page-privacy.php対応時と同じくmarginでクリアランスを * 確保する（背景画像を伴う要素はpaddingで確保するとpadding-box起点で塗られる * 範囲がずれるため、marginを使う）。 */ body.interview .site-nav--sp.interview-head { margin-top: 53px; background: url("../images/recruit/sp/interview-title-bg.png") repeat-x; background-size: auto 60px; text-align: center; } body.interview .site-nav--sp.interview-head img { display: inline-block; padding: 15px 0 20px; } /* * .page-template-page-interview .contents{background:url(interview-bg.png) * repeat;background-size:67px 20px}相当。本統合ではtiticaca-sp側の * .main-wrap>.contentsに相当する専用ラッパーを追加していないため、同じ視覚 * 効果を.sp-main-wrap（ページ全体のラッパー）に適用する（page-qa.phpと同じ手法）。 * 本番のbody classはWordPress標準のbody_class()が自動生成する * page-template-page-interviewだが、page-interview.php自体はbody_class()を * 使わずbodyクラスを直書きしており（）、 * このクラスは実際には付与されない。背景が全く表示されない不具合として発覚 * したため、実際に付与されている.interviewを基準にする。 */ /* * .edit-areaのmargin:20px（下方向分）がコンテナ側（.contents-wrap/#content/ * .sp-main-wrap）に高さを止めるpadding/borderが無いため外側へcollapseし、 * .sp-main-wrap自身のボックスが.edit-areaの下端でぴったり終わってしまっていた * （本番は.contents自体が.edit-areaの下端から20px分余分に伸びており、その * 範囲にも装飾パターンが塗られる）。display:flow-rootで新しいブロック整形 * コンテキストを作り、margin collapseを起こさないようにして本番と同じ高さに * 揃える（overflow:hiddenではなくflow-rootを使うのは、はみ出し要素を誤って * クリップしないため）。 */ body.interview .sp-main-wrap { display: flow-root; background: url("../images/recruit/sp/interview-bg.png") repeat; background-size: 67px 20px; } body.interview .site-nav--sp.contents-wrap { padding: 0; } /* * recruit/style.cssの裸の#content{color:#3a1d1d;font-size:14px; * line-height:2.14;letter-spacing:0.2em}はPC専用の基準タイポグラフィだが、 * IDセレクタ（詳細度1,0,0）はbody.interview側のクラスセレクタより優先されて * しまうため、SP側の#content配下（.edit-area含む）にもそのまま漏れていた * （page-qa.php対応時に同じ問題を発見・修正済みだったが、当ページへの移植が * 漏れていた。ユーザー報告「本文のフォントサイズが異なる」により再発見）。 * SP共通の基準タイポグラフィで打ち消す。 */ body.interview #content { color: #333; font-size: 13px; line-height: 1.7; letter-spacing: normal; } /* * recruit/style.cssの裸の.edit-area{width:980px;margin:59px auto 0; * border-radius:6px;background-color:#fff}（全recruit系ページ共通の基本枠）が * クラス名共有でSP側にも漏れる。本番titicaca-sp/css/common.cssの共通 * .edit-area{background-color:#fff;padding:20px 30px;margin:20px}（白カード地、 * page-interview固有の上書きは無い）に合わせ、width/border-radiusのみ打ち消す。 */ body.interview .site-nav--sp .edit-area { width: auto; margin: 20px; padding: 20px 30px; box-sizing: border-box; border-radius: 5px; background-color: #fff; font-size: 12px; } body.interview .site-nav--sp .edit-area img { max-width: 100%; height: auto; } }