@charset "utf-8";

/*
 * 未来の仕事ページの広告出し分け（テーマ側で管理）
 *
 * このファイルはコーディングデータ（assets/css/shinro.css および
 * assets/src/sass/** ）に含まれない、テーマ側で追加したスタイル。
 * shinro.css / shinro.scss はコーダー支給物で、支給のたびに丸ごと差し替わり
 * こちらの追記が巻き戻るため、あえて別ファイルに分離している。
 * 読み込みは inc/head/parts-getstyle.php で shinro.css の直後に行う。
 *
 * 修正・追加する場合もコーディングデータ側には書かないこと。
 */

/*
 * タブレット帯（600〜1023px）の広告出し分け。
 * 縦長広告(type c) と 本文下バナー(f/g) を非表示にする（上部 a はPC用のまま、b/d/e も表示のまま）。
 * 科学ページ（kagaku-ads.css）と同じ方針に揃えている。
 *
 * PC専用枠は sp_none クラスで出し分けているが、これを消しているのは
 * style_sp.css（media="max-width: 599px" でしか読み込まれない）だけで、
 * 600px 以上はすべてPC扱いになりタブレット帯を消す仕組みがない。ここで補う。
 *
 * 上限を 1023px にしているのは shinro.css のタブレット帯レイアウトに合わせたもの。
 * 1024px 以上（iPad 横向き・iPad Pro 12.9" 縦）はCSSではPCと区別できないため対象外＝
 * PCと同じく c/f/g が表示される。
 *
 * .wrapper--shinro（my_get_wrapper_class() が未来の仕事トップにのみ付与）で絞っている。
 */
@media screen and (max-width: 1023px) {
  /* サイドバー下の type c（300×250 または 300×600・PC専用の sp_none 枠） */
  .wrapper--shinro .b-shinro-sidebar .pr.pr02 > .sp_none {
    display: none;
  }

  /* 本文下バナー f/g（自由サイズ2列・PC専用の sp_none 枠） */
  .wrapper--shinro .inner02 .pr.col_02.sp_none {
    display: none;
  }
}

/*
 * サイドバー下の広告枠（C・D・E / inc/aside/parts-bnr_bottom.php）の上マージン打ち消し。
 * 当該ブロックは共通ユーティリティ .mtm（common.css の margin-top:45px !important）を持つ。
 * 未来の仕事のサイドバーは 1023px 以下でのみ flex の gap（36px）で間隔を取るため、
 * その帯だけ gap + 45px の二重取りになる。PC（1024px 以上）は gap: 0 で
 * .mtm の 45px 単独で成立しているので、打ち消しもタブレット帯以下に限定する。
 */
@media screen and (max-width: 1023px) {
  .b-page-shinro .b-shinro-sidebar .pr.pr02 {
    margin-top: 0 !important;
  }
}

/*
 * 下層ページ（sidebar.php 経由の共通サイドバー）のランキング上マージンの二重取り打ち消し。
 * 共通サイドバーのラッパーは他ブロックと揃えて .mtm（common.css の margin-top:45px !important）
 * を持つが、PC（1024px 以上）では shinro.css の .b-shinro-ranking { margin-top: 40px } が
 * 重なって 85px になる。1023px 以下は shinro.css 側が 0 で 45px 単独のため対象外。
 * 未来の仕事トップのサイドバーは .b-shinro-layout__side 配下でこのセレクタに当たらない。
 */
.side_nav_side_inner .b-page-shinro .b-shinro-ranking {
  margin-top: 0;
}

/*
 * 広告 A枠（カテゴリ枠の下 / inc/bnr/parts-top.php）の上下マージン。
 *
 * A枠は共通ユーティリティ .mts（common.css の margin-top:20px !important）しか持たず、
 * 下マージンは他ページなら直後のブロック側の margin で取れている。
 * 未来の仕事トップは直後が .b-shinro-layout__pickup-band で、背景帯が
 * 要素の上端から始まるため下の余白がゼロになり、広告が背景帯に接してしまう。
 *
 * 上は .b-shinro-category の padding-bottom（64px / SP 40px）が効いているので、
 * .mts の 20px を打ち消してこの余白単独にし、下も同値を入れて上下を揃える。
 */
.wrapper--shinro .pr.mts {
  margin-top: 0 !important;
  margin-bottom: 64px;
}

@media screen and (max-width: 599px) {
  .wrapper--shinro .pr.mts {
    margin-bottom: 40px;
  }
}

/*
 * 下層ページのサイドバー先頭に置くお仕事診断バナー（inc/shinro/parts-sidebar.php）。
 *
 * 支給データのバナーは未来の仕事トップのメインカラム（幅 700px 超）専用で、
 * 600px 以上では横並びになる。キャラ画像 128px 固定 ＋「診断スタート」ボタン
 * 198px（white-space: nowrap で縮まない）＋ padding・border・gap で 380px 前後を
 * 要求するため、内寸 294px のサイドバーでは min-width: 0 のテキストブロックが
 * 幅 0 まで潰れ、文字が 1 文字ずつ折り返って高さ 1300px の空箱になる。
 *
 * 支給データにサイドバー幅のバリエーションが無いので、599px 以下の縦積み
 * レイアウトをサイドバー内では全幅で適用して回避する。級数と画像サイズは
 * shinro.css の 1023px 以下の指定に合わせる（狭い幅向けの値だから）。
 * 見出しだけは 1023px 以下の 2.4rem でも内寸 266px に収まらず 2 行に折れるので、
 * さらに 1 段下げて 2.2rem にしている。
 */
.b-shinro-sidebar .b-shinro-diagnosis {
  flex-direction: column;
  align-items: center;
  padding: 24px 14px;
  border-radius: 20px;
}

.b-shinro-sidebar .b-shinro-diagnosis__main {
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.b-shinro-sidebar .b-shinro-diagnosis__visual {
  width: 108px;
  height: 97px;
}

.b-shinro-sidebar .b-shinro-diagnosis__lead,
.b-shinro-sidebar .b-shinro-diagnosis__title,
.b-shinro-sidebar .b-shinro-diagnosis__desc {
  text-align: center;
}

/* 級数とボタンの詰めは 599px 以下では支給データが同じことをしているので、600px 以上だけ当てる。 */
@media screen and (min-width: 600px) {
  .b-shinro-sidebar .b-shinro-diagnosis__lead {
    font-size: 1.5rem;
  }

  .b-shinro-sidebar .b-shinro-diagnosis__title {
    font-size: 2.2rem;
  }

  .b-shinro-sidebar .b-shinro-diagnosis__action {
    padding: 12px 14px;
    font-size: 1.9rem;
  }
}

/*
 * バナーと注目記事ランキングの間隔。
 * サイドバーの gap は 1023px 以下だけ 36px で、PC（1024px 以上）は 0。
 * PC はランキング側の margin-top（shinro.css の 40px）で間隔を取る作りだが、
 * 下層は .mtm との二重取りを打ち消して 0 にしているため、ここで補う。
 */
@media screen and (min-width: 1024px) {
  .side_nav_side_inner .b-shinro-sidebar .b-shinro-diagnosis {
    margin-bottom: 40px;
  }
}