/*
* page-recruit.php（リクルートトップ）のSP対応。
* page-qa.php/page-interview.phpと同じrecruit系独立HTMLページで、同じ既知の
* 漏れパターン（#container/#content/裸.edit-area、margin collapse）を最初から
* 打ち消しておく。装飾パターン背景等の値は本番titicaca-sp/css/recruit.cssの
* 実際の値をそのまま移植。
*/
@media (max-width: 768px) {
body.home {
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;
}
/*
* 本番titicaca-sp/css/recruit.cssの`.page-recruit .contents-wrap
* {padding-bottom:30px}`相当。当初.contents-wrapのラッパー自体を
* page-recruit.phpに実装し忘れており、SP最後のボタン下に本番同様の
* 余白が付かず詰まって見える不具合として発覚した。
*/
body.home .contents-wrap {
padding-bottom: 30px;
}
/*
* recruit/style.cssの裸のh1/h2向けPC専用ルール（body.home h1{margin-top:12px}・
* body.home h2{margin-top:5px}・body.home h2,body.faq h1,body.interview h1
* {padding:30px 0 29px;margin-bottom:19px;...}）は、#signage/.pagetitle等の
* 見出し用だが、タグ名（h1/h2）共有でこのページのSPマークアップに使われている
* あらゆるh1/h2（`.sp-header__logo`・`.visual__img`・代表メッセージ内タイトル・
* `.company-bg`/`.work-bg`/`.support-bg`・共通フッターの`.sp-footer__logo`/
* `.sp-footer__logo--txt`）に個別に漏れ、都度ユーザー報告で発覚してきた
* （フッターが他ページより縦に長い、という指摘の原因も`.sp-footer__logo--txt`
* のpadding:30px 0 29px漏れだった）。もぐら叩き的な個別対応ではなく、
* padding/margin-bottomをsite-nav--sp配下のh1/h2全体で一括打ち消しする
* （margin-top・margin-left/rightは要素ごとに意図した値があるため触れず、
* 必要な要素だけ個別に指定を残す）。
*/
body.home .site-nav--sp h1,
body.home .site-nav--sp h2 {
padding: 0;
margin-bottom: 0;
}
body.home .sp-header__logo,
body.home .sp-footer__logo {
margin-top: 0;
}
/*
* 上のh1/h2一括padding:0リセットが、.sp-header__logo自身の本来の意図した
* 値（responsive-nav.cssのpadding:12px 0、ヘッダー内でロゴを縦中央寄せする
* ためのもの）まで巻き込んで消してしまい、ロゴがヘッダー上端に張り付いて
* 見える不具合が発生した（ユーザー報告により発見）。ここだけ明示的に
* 復元する（詳細度をh1一括ルールより高くするため.site-nav--spを重ねる）。
*/
body.home .site-nav--sp .sp-header__logo {
padding: 12px 0;
}
/* recruit/style.cssの#container{background:#ffffff}のSP側漏れ打ち消し（qa/interviewと同じ問題） */
body.home #container {
background: transparent;
}
/* recruit/style.cssの裸の#content{color:#3a1d1d;font-size:14px;line-height:2.14;letter-spacing:0.2em}の打ち消し */
body.home #content {
color: #333;
font-size: 13px;
line-height: 1.7;
letter-spacing: normal;
}
/*
* recruit/style.cssの裸のbody{letter-spacing:0.2em}は#contentの外側の
* フッター全体（.sp-footer__copyright・.sp-footer__pagetop・.sp-footer__link
* 等）にも継承され、コピーライト文字列が横に広がって2行に折り返る、
* 「Page top」「オンラインショップ」の文字間が他ページより広がって見える、
* といった不具合として発覚した（ユーザー報告、1要素ずつ個別打ち消しでは
* 都度漏れが再発したため、フッター全体を一括で打ち消す方式に変更）。
* #content向けの打ち消しはフッターまで届かないため、個別に打ち消す。
*/
body.home footer.sp-footer {
letter-spacing: normal;
}
/*
* .edit-areaの下マージンがコンテナ側にmargin collapseで抜けて装飾パターンが
* 途切れる不具合対策（page-interview.php対応時に確立済み）。
*/
body.home .sp-main-wrap {
display: flow-root;
}
/* recruit/style.cssの裸の.edit-area{width:980px;margin:59px auto 0;border-radius:5px;background-color:#fff}の打ち消し。
* 本番titicaca-sp/css/common.cssの共通.edit-area{background-color:#fff;padding:20px 30px;margin:20px;border-radius:5px}に合わせる */
body.home .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.home .site-nav--sp .edit-area img {
max-width: 100%;
height: auto;
}
/* .edit-area.messageはmargin-topのみ0（本番titicaca-sp/css/recruit.cssの.edit-area.message{margin-top:0}） */
body.home .site-nav--sp .edit-area.message {
margin-top: 0;
}
/*
* recruit/style.cssの裸の`body.home h1{margin-top:12px;margin-bottom:0;
* line-height:1;text-align:center}`はPC専用（#signage内の見出し用）だが、
* タグ名（h1）共有でハンバーガーメニューの`.sp-header__logo`（h1タグ）にも
* 漏れてしまい、responsive-nav.cssの`.sp-header__logo{margin:0 auto}`の
* margin-topを12pxに上書きしていた。ヘッダーロゴが固定ヘッダー（53px）の
* 高さを超えて下にはみ出し、他ページと違って見える不具合として発覚
* （ユーザー報告により発見）。全ページ共通のヘッダーなので、このページの
* bodyクラス（.home）に限定して打ち消す。
*/
body.home .sp-header__logo {
margin-top: 0;
}
/*
* タイトルビジュアル（.visual.visual--recruit）。本番titicaca-sp側には
* このクラス専用のCSSは存在せず（bareなdivのまま、.headerが非fixedのため
* 自然にheader分の余白ができる）、本統合ではposition:fixedの.sp-header
* （実際の高さ53px）に隠れないようmarginでクリアランスを確保する
* （page-qa.php等と同じ対処）。
*/
body.home .site-nav--sp.visual--recruit {
margin-top: 53px;
}
/*
* recruit/style.cssの裸の`body.home h2{margin-top:5px;z-index:1}`・
* `body.home h2,body.faq h1,body.interview h1{padding:30px 0 29px;
* margin-bottom:19px;...}`はPC専用（#signage/.pagetitle用）だが、タグ名
* （h2）共有で`.visual__img`（h2タグ）にも漏れ、画像の上下に不要な余白が
* 生まれていた（ユーザー報告により発見）。他の統合済みページと同じ
* `.visual__img{margin:0}`の基準に合わせ、padding含めて明示的に0へ戻す。
*/
body.home .site-nav--sp .visual__img {
margin: 0;
padding: 0;
}
body.home .site-nav--sp.visual--recruit img {
display: block;
width: 100%;
height: auto;
}
/*
* 代表メッセージ（.bg-pattern-message）。本番titicaca-sp/css/recruit.cssの
* .bg-pattern-message{padding-top:20px;background:url(recruit-pattern-message-left.png)
* repeat-y left top,url(recruit-pattern-message-right.png) repeat-y right top;
* background-size:23px 382px}、.message .catch span{display:block;line-height:2.3;
* text-align:center;font-weight:bold}、text-pink/text-green/text-brownの配色。
*/
body.home .site-nav--sp.bg-pattern-message {
padding-top: 20px;
background: url("../images/recruit/sp/recruit-pattern-message-left.png") repeat-y left top,
url("../images/recruit/sp/recruit-pattern-message-right.png") repeat-y right top;
background-size: 23px 382px;
}
body.home .site-nav--sp .message .catch span {
display: block;
line-height: 2.3;
text-align: center;
font-weight: bold;
}
body.home .site-nav--sp .message .catch .text-pink { color: #e50a84; }
body.home .site-nav--sp .message .catch .text-green { color: #1bb922; }
body.home .site-nav--sp .message .catch .text-brown { color: #3a1d1d; }
/*
* recruit/style.cssの裸の`body.home h2,body.faq h1,body.interview h1
* {padding:30px 0 29px;margin-bottom:19px;...}`・`body.home h2{margin-top:5px}`
* はPC専用（#signage等の見出し用）だが、タグ名（h2）共有でこのページの装飾
* タイトル見出し（代表メッセージのタイトル画像を包むh2）にも漏れ、上下に不要な
* paddingを生んでいた（ユーザー報告により発見）。本番実測値（padding:0、
* margin:0 0 30px）に合わせる。
*/
body.home .site-nav--sp .edit-area.message h2 {
padding: 0;
margin: 0 0 30px;
}
/*
* 事業紹介（.bg-pattern-company）。本番titicaca-sp/css/recruit.cssの実際の値。
*/
body.home .site-nav--sp.bg-pattern-company {
background: url("../images/recruit/sp/recruit-pattern-company.png") repeat 37px 80px;
background-size: 37px 163px;
}
/*
* .company-bg（h2タグ）も.edit-area.message h2と同じ理由でPC専用のpadding/
* marginが漏れ、本来62.5px程度で収まるはずの帯が実測120px前後に膨らみ、
* 縦repeatの背景画像（bg-recruit-company.png）が2回分表示されてしまって
* いた（ユーザー報告「bg画像が2つ表示されている」の原因）。本番実測値
* （padding:0、margin:40px 0 0、mt40クラス相当の値のみ残す）に合わせる。
*/
body.home .site-nav--sp .company-bg {
background: url("../images/recruit/sp/bg-recruit-company.png");
display: block;
background-size: 700px 62.5px;
padding: 0;
margin: 40px 0 0;
}
body.home .site-nav--sp .company-bg img {
padding: 20px 0 22px;
}
/*
* .edit-area.company内の本文。本番titicaca-sp/css/common.cssの共通
* `.edit-area p{line-height:1.9}`（他ページのSP共通基準1.7とは別枠の
* 上書き）が本ページには移植できておらず、行間が詰まって見えていた
* （ユーザー報告により発見）。line-height修正後も「まだ詰まっている」との
* 追加報告を受け再調査したところ、`#menu`のドロップダウンCSSに必要で
* 読み込み続けている`/css/common.css`（page-qa.php対応時に判明した依存）
* が持つ全称セレクタ`*{margin:0}`がSP側の`
`にも無条件に効いており、
* 本番では素の状態（ブラウザ既定の`1em 0`≒12px）で表示される段落間の
* 余白ごと消えていたと判明。line-heightだけでなく段落マージンも本番実測値
* （12px 0）で明示的に打ち消す必要があった。
*/
body.home .site-nav--sp .edit-area p {
line-height: 1.9;
margin: 12px 0;
}
body.home .site-nav--sp .edit-area.company {
color: #3a1d1d;
}
body.home .site-nav--sp .mt10 { margin-top: 10px; }
body.home .site-nav--sp .mt20 { margin-top: 20px; }
body.home .site-nav--sp .mt30 { margin-top: 30px; }
body.home .site-nav--sp .mt40 { margin-top: 40px; }
/*
* 上記.mtXXユーティリティクラスは「.site-nav--spを祖先に持つ子孫要素」を
* 前提にした子孫セレクタだが、.support-bgのように.site-nav--sp自体を
* 同じ要素に併記している場合はマッチしない（子孫セレクタは同一要素内の
* 併記クラスにはマッチしないため）。body.homeスコープのみの単純クラス
* セレクタでも重ねて適用されるようにし、要素の入れ子構造に依存しない
* ようにする。
*/
body.home .mt10 { margin-top: 10px; }
body.home .mt20 { margin-top: 20px; }
body.home .mt30 { margin-top: 30px; }
body.home .mt40 { margin-top: 40px; }
/*
* チチカカの働き方（.bg-pattern-work、Slickカルーセル）。本番titicaca-sp/css/
* recruit.cssの実際の値。インタビュー画像はwp_get_attachment_image()で280×349
* 固定サイズ出力しているため、max-width:100%で画面幅に収まるよう縮小する
* （本番同様スライドは中央寄せ、Slickが横並びに変換）。
*/
body.home .site-nav--sp.bg-pattern-work {
background: url("../images/recruit/sp/recruit-pattern-work.png") repeat 37px 55px;
background-size: 50px 105px;
}
body.home .site-nav--sp .work-bg {
background: url("../images/recruit/sp/bg-recruit-work.png");
display: block;
background-size: 700px 62.5px;
padding: 0;
margin: 40px 0 0;
}
body.home .site-nav--sp .work-bg img {
padding: 20px 0 22px;
}
body.home .site-nav--sp .edit-area.work {
padding: 0;
}
body.home .site-nav--sp .edit-area.work img {
max-width: 100%;
height: auto;
}
body.home .site-nav--sp .work .slick-slider {
margin-bottom: 0;
}
body.home .site-nav--sp .work .slick-prev {
background: url("../images/recruit/sp/btn-pre-blue.png");
background-size: 35px 35px;
}
body.home .site-nav--sp .work .slick-next {
background: url("../images/recruit/sp/btn-next-blue.png");
background-size: 35px 35px;
}
body.home .site-nav--sp .work .slick-dots {
margin: 0 !important;
bottom: 10px;
}
body.home .site-nav--sp .work .slick-dots button:before,
body.home .site-nav--sp .work .slick-dots button:after {
content: "";
}
body.home .site-nav--sp .work .slick-dots li {
width: 10px;
height: 10px;
}
body.home .site-nav--sp .work .slick-dots li button:before {
width: 10px;
opacity: 1;
height: 10px;
background-color: #2b59de;
border-radius: 10px;
}
body.home .site-nav--sp .work .slick-dots li.slick-active button:before {
width: 6px;
opacity: 1;
height: 6px;
background-color: #fff;
border: 2px solid #2b59de;
border-radius: 10px;
}
body.home .site-nav--sp .work .slick-dots li:after {
background-color: #2b59de;
}
/* サポート制度バナー（.support-bg）。本番titicaca-sp/css/recruit.cssの実際の値 */
body.home .site-nav--sp.support-bg {
background: url("../images/recruit/sp/bg-recruit-support.png");
display: block;
background-size: 700px 62.5px;
padding: 0;
margin: 30px 0 0;
}
body.home .site-nav--sp.support-bg img {
padding: 20px 0 22px;
}
/*
* エントリー/FAQボタン等（画像ボタン、aligncenterで中央寄せ）。
* `margin:0 auto`という省略記法はmargin-topも0に上書きしてしまうため、
* `class="mt10 aligncenter"`のように.mtXXユーティリティクラスを併用している
* 要素（事業紹介セクションの各画像等）でmargin-topが効かなくなっていた
* （ユーザー報告により発見）。左右中央寄せはmargin-left/rightだけに限定し、
* margin-topは.mtXX側に委ねる。
*/
body.home .site-nav--sp img.mt20 { margin-top: 20px; }
body.home .site-nav--sp img.mt30 { margin-top: 30px; }
body.home .site-nav--sp img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
height: auto;
}
/* #slider-next（bxSlider由来の空要素、常時非表示。site-nav--spの!importantで
* display:blockに上書きされてしまうため明示的にnoneへ戻す） */
body.home span#slider-next.site-nav--sp {
display: none !important;
}
}