/* * page-qa.php（よくある質問）のSP対応。 * recruit/qaはtiticaca_is_independent_html_page()によりサイト共通の * style.css/responsive-nav.css読み込み対象から除外され、独自のrecruit/reset.css・ * recruit/style.cssだけでレイアウトが完結する特殊ページ（front-page.phpと同種）。 * recruit/style.cssはbody{width:100%;min-width:980px}のようなPC固定幅前提の * ルールを裸のセレクタ・共有クラス名（.edit-area/.faq-list等）で持っており、 * 新設したSP用マークアップ（.site-nav--sp側）にもそのまま漏れて効いてしまうため、 * 本番titicaca-sp/css/recruit.css（コンパイル後）の実際の値に合わせて個別に * 打ち消す。 */ @media (max-width: 768px) { body.page-qa { 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の装飾パターン（faq-bg.png）の背後が * 白く見えてしまう（page-interview.php対応時にユーザーが本番と見比べて発見した * 同じ問題）。本番titicaca-sp側はそもそも#containerという要素が無い。 */ body.page-qa #container { background: transparent; } /* * recruit/style.cssの.wrap-top{position:fixed;height:55px;min-width:980px}は * PC専用の固定ヘッダー。#wrap-top（page-qa.php側でidも付与済み）に対する * responsive-nav.cssの共通打ち消しルールがposition/height/min-widthを * 上書き済みだが、クラスセレクタ.wrap-top自体はそちらより詳細度が低いため * 実害はない（念のため明記）。 */ /* * PC版#signageに相当するSP用タイトル画像。本番titicaca-sp/css/recruit.cssの * .page-qa .recruit-qa-head相当。position:fixedの.sp-header（実際の高さ53px）に * 隠れないための余白が必要な点は他ページ（.visual--history等）と同じだが、 * ここではpaddingではなくmarginで確保する。理由: 背景画像（赤帯、faq-title-bg.png、 * background-size:497px 60px）はdiv自身のボックス（paddingを含むpadding-box）の * 左上を起点に塗られるため、paddingで53px分の余白を作るとその53px分もペイント * 対象に含まれてしまい、肝心の見出しテキストが表示される高さ（53px以降）に届く前に * 60px分のタイルが終わってしまう（実機で「文字部分だけ赤く、周囲が赤くならない」 * 不具合として発覚）。marginはボックス外の余白なので背景がそこに塗られることはなく、 * 本番同様「div自身の高さ全体（≒60px）にちょうど赤帯が塗られる」構造に一致する。 */ body.page-qa .site-nav--sp.recruit-qa-head { margin-top: 53px; background: url("../images/recruit/sp/faq-title-bg.png") repeat-x; background-size: 497px 60px; text-align: center; } /* * qa-title01.pngのHTML属性（width="195" height="23"）が実画像（255×33）の * 比率と一致しておらず、height:auto無しでは縦にわずかに（約9%）圧縮されて * 表示される（本番はグローバルのimg{height:auto}リセットで吸収、 * page-convey.php対応時に発見した同種パターンの横展開監査により発覚） */ body.page-qa .site-nav--sp.recruit-qa-head img { display: block; height: auto; margin: 0 auto; padding: 15px 0 20px; } /* * #contentはrecruit/style.cssで裸のIDセレクタとして * color/font-size/line-height/letter-spacingが指定されており、SP側にも * そのまま漏れる。SP共通の基準タイポグラフィに合わせて打ち消す。 */ body.page-qa #content { color: #333; font-size: 13px; line-height: 1.7; letter-spacing: normal; } /* * .page-qa .contents{background:url(faq-bg.png) repeat 0 100px; * background-size:146px 151px}相当。本統合ではtiticaca-sp側の.main-wrap> * .contentsに相当する専用ラッパーを追加していないため、同じ視覚効果を * .sp-main-wrap（ページ全体のラッパー）に適用する。 */ body.page-qa .sp-main-wrap { background: url("../images/recruit/sp/faq-bg.png") repeat 0 100px; background-size: 146px 151px; } body.page-qa .site-nav--sp.contents-wrap { padding: 0; } /* * recruit/style.cssの裸の.edit-area{width:980px;margin:59px auto 0; * border-radius:6px;background-color:#fff}（全recruit系ページ共通の基本枠）と * .faq .edit-area{margin-top:0;padding:80px 120px;box-sizing:border-box} * （PC専用の追加余白）が、クラス名（.edit-area）共有でSP側にも漏れる。 * 本番titicaca-sp/css/recruit.cssは共通の.edit-area{background-color:#fff; * padding:20px 30px;margin:20px}（白カード地）に.page-qa .edit-area * {padding-left:10px;padding-right:27px}を重ねた値になっている（背景色・margin * はqa固有の上書きが無いためそのまま生きる）ため、同じ組み合わせに揃える。 * width/border-radiusはPC専用（980px固定幅・角丸）なので打ち消す。 * font-sizeは本番titicaca-sp/css/common.cssの裸の.edit-area{font-size:12px} * （サイト全体で.edit-area共通の基準、page.php/page-history.php等でも同様）が * 効いており、bodyの基準13pxではなく12pxで子孫（.faq-list/dd/.q-icon-area等）に * 継承されていた。これを明示せずbody基準の13pxのまま出していたため、ユーザーから * 「文字サイズが本番より大きい」と指摘を受け発覚（本番実測でqAreaのfont-size:12px * を確認）。 */ body.page-qa .site-nav--sp .edit-area { width: auto; margin: 20px; padding: 20px 27px 20px 10px; box-sizing: border-box; border-radius: 0; background-color: #fff; font-size: 12px; } /* * recruit/style.cssの.faq-list dt/dd/table系（PC用の大きい余白・アイコン * サイズ）も同じくクラス名共有で漏れるため、本番titicaca-sp/css/recruit.css * の.page-qa .faq-list系の実際の値に合わせて個別に打ち消す。 */ /* * .faq-list(dl要素)自体はmargin:0で打ち消していたが、本番titicaca-spは * 明示的な.faq-listルールを持たず、ブラウザ標準の
マージン * （.edit-areaのfont-size:12pxを基準にした1em=12px）がそのまま * 上下に効いていた。実測12px 0pxに合わせる（ユーザー指摘により発覚）。 */ body.page-qa .site-nav--sp .faq-list { margin: 12px 0; } body.page-qa .site-nav--sp .faq-list dt { min-height: 0; margin: 0; box-sizing: border-box; } body.page-qa .site-nav--sp .faq-list dt img { max-width: 100%; height: auto; vertical-align: middle; } body.page-qa .site-nav--sp .faq-list dd { position: relative; /* * 本番titicaca-sp/css/recruit.cssの実際の値はmargin-top/bottom/leftのみの * 指定でmargin-rightは0（.faq-list dd{margin:0}の初期リセットのまま）。 * 3値省略記法margin:15px 27px 30pxと誤記すると右にも27pxの余白が入り、 * カード右側の余白（27px+27px=54px相当）が左側（10px+27px=37px相当）より * 大きくなってコンテンツ全体が左に寄って見えてしまう（ユーザー報告により発覚）。 */ margin: 15px 0 30px 27px; padding: 15px 18px 15px 22px; box-sizing: border-box; border-radius: 5px; background: url("../images/recruit/sp/box-bg.png"); } body.page-qa .site-nav--sp .faq-list dd > div.q-icon-area { position: static; } body.page-qa .site-nav--sp .faq-list dd:before { position: absolute; top: 15px; left: -13px; content: ""; display: block; width: 25px; height: 25px; margin-top: 0; background: url("../images/recruit/sp/faq-list-icon-a.png") no-repeat; background-size: 25px 25px; } body.page-qa .site-nav--sp .faq-list dd > div.q-icon-area:before { content: none; } body.page-qa .site-nav--sp .faq-list table { width: 100%; margin-top: 1em; border: none; border-radius: 5px; background-color: #fff; } body.page-qa .site-nav--sp .faq-list table th, body.page-qa .site-nav--sp .faq-list table td { padding: 0 1em; font-weight: normal; } body.page-qa .site-nav--sp .faq-list table th { text-align: left; } body.page-qa .site-nav--sp .faq-list table th + td { padding-left: 1em; } body.page-qa .site-nav--sp .faq-list table .center-table-content { padding-right: 45%; text-align: center; } body.page-qa .site-nav--sp .faq-list table tr:first-child th { padding-top: 1em; } body.page-qa .site-nav--sp .faq-list table tr:last-child th { padding-bottom: 1em; } }