@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* リアル時給: 親しみやすさ寄り。土台はキーカラー(深い青緑)、お得=緑・割高=橙だけを目立たせる */
:root{
  --rj-key:#155E75; --rj-key-soft:#e8f4f7;
  --rj-plus:#12784a; --rj-plus-bg:#e3f5ea;
  --rj-minus:#b4530f; --rj-minus-bg:#fdeedd;
  --rj-line:#d9e6ea;
}

/* トップ最上部: 県を選ぶ */
.rj-hero{background:var(--rj-key-soft);border-radius:16px;padding:24px 20px;margin-bottom:2em;text-align:center}
.rj-hero-title{font-size:1.5em;font-weight:bold;color:var(--rj-key);line-height:1.5;margin-bottom:.5em}
.rj-hero-sub{font-size:.95em;margin-bottom:1em}
.rj-select-label{display:block;font-weight:bold;margin-bottom:.3em}
.rj-select{font-size:1.1em;padding:.5em 1em;border:2px solid var(--rj-key);border-radius:999px;background:#fff;min-width:14em;max-width:100%}
.rj-pick{margin-top:1.2em}
.rj-card-link{margin:.8em 0 0;font-weight:bold}

/* 県の結論カード(トップの県選択・県別ページ共通) */
.rj-card{background:#fff;border:2px solid var(--rj-line);border-radius:16px;padding:18px 16px;text-align:center;margin-bottom:1.5em}
.rj-card p{margin:0 0 .5em}
.rj-card p:last-child{margin-bottom:0}
.rj-card-pref{font-size:1.2em;font-weight:bold;color:var(--rj-key)}
.rj-card-wage strong{font-size:1.2em}
.rj-card-diff .rj-badge{font-size:1.35em;padding:.35em 1em}
.rj-card-rank{font-size:.95em}

/* お得・割高のバッジと順位の矢印 */
.rj-badge{display:inline-block;border-radius:999px;padding:.15em .7em;font-weight:bold;white-space:nowrap}
.rj-plus{color:var(--rj-plus);background:var(--rj-plus-bg)}
.rj-minus{color:var(--rj-minus);background:var(--rj-minus-bg)}
.rj-even{color:#555;background:#eee}
.rj-arrow{font-weight:bold;font-size:.9em;white-space:nowrap}
.rj-up{color:var(--rj-plus)}
.rj-down{color:var(--rj-minus)}
.rj-same{color:#888}

/* 見どころの3枚 */
.rj-hls{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:1.5em}
.rj-hl{display:block;border:2px solid var(--rj-line);border-radius:14px;padding:14px;text-align:center;text-decoration:none;color:inherit;transition:border-color .2s}
.rj-hl:hover{border-color:var(--rj-key)}
.rj-hl > span{display:block}
.rj-hl-label{font-size:.85em;color:var(--rj-key);font-weight:bold}
.rj-hl-pref{font-size:1.3em;font-weight:bold;margin:.2em 0}
.rj-hl-text{font-size:.9em}

/* 47都道府県の一覧 */
.rj-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rj-table{width:100%;font-size:.95em}
/* Cocoonの表の色指定より優先させる */
.rj-table thead th{background:var(--rj-key)!important;color:#fff!important;cursor:pointer;white-space:nowrap}
.rj-table th[aria-sort="ascending"]::after{content:" ▲"}
.rj-table th[aria-sort="descending"]::after{content:" ▼"}
.rj-table td{white-space:nowrap}
.rj-table tbody tr:nth-child(even){background:#f7fbfc}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /* スマホ・タブレットでは一覧表の列を絞る(細かい数字は県別ページ) */
  .rj-table .rj-pc{display:none}
  .rj-hls{grid-template-columns:1fr}
}

/*480px以下*/
@media screen and (max-width: 480px){
  .rj-hero{padding:20px 14px}
  .rj-hero-title{font-size:1.3em}
  .rj-table{font-size:.85em}
  .rj-table th,.rj-table td{padding:6px 4px}
}