@charset "UTF-8";

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	記事ページ

	このファイルは親テーマ resocaba__theme/style/page/single.css の
	内容を引き継いだうえで、記事の組版を作り直したものです。
	rc_asset() は「子にあれば子、無ければ親」を返すため、
	子にこのファイルを置いた時点で親側は読み込まれなくなります。
	親テーマ側の single.css を変更したときは、ここへ手で反映してください。

	── 組版の考え方 ──────────────────────────────

	この記事群は「求人票を実際に開いて数えた」ことが中身です。
	そこで、ページに出てくる文字を2つの声に分けています。

	  明朝（NotoSerifJP）  … サイトが自分の言葉で語る部分。本文と見出し。
	  ゴシック（NotoSansJP）… 数えて出てきた事実。もくじの番号、表の見出し、
	                          キャプション、日付、注記。

	読者は「どこがこのサイトの意見で、どこが求人票に書いてあった事実か」を
	書体で見分けられます。装飾ではなく、記事の性質そのものの表現です。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

:root{
    --rc-ground: #FEF8E8;   /* 地色（クリーム） */
    --rc-paper:  #FFFFFF;   /* 表・もくじの下地 */
    --rc-ink:    #2D220C;   /* 本文 */
    --rc-brand:  #705319;   /* 見出し・リンク */
    --rc-gold:   #C8A64B;   /* 罫・番号 */
    --rc-rule:   #E0D2AE;   /* 細罫 */
    --rc-mute:   #8A7648;   /* 注記 */
    --rc-deep:   #3A2B0F;   /* 反転ブロック */
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	title（記事ヘッダー）

	背景画像は inc/article.php が記事ごとのアイキャッチに差し替えます。
	アイキャッチが無い記事は、下の既定の画像のままになります。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.single__title{
    position: relative;
    height: 340px;
    background-image:
        linear-gradient(180deg, rgba(20,14,4,0.34) 0%, rgba(20,14,4,0.16) 45%, rgba(20,14,4,0.42) 100%),
        url(/wp-content/themes/resocaba__theme/images/single/single__bg--pc.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.single__title h1{
    position: absolute;
    z-index: 1;
    width: 100%;
    max-width: 940px;
    padding: 0 24px;
    margin-top: 44px;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: "NotoSerifJP", serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.62;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 3px rgba(12,8,2,0.55), 0 2px 18px rgba(12,8,2,0.55);
}
@media only screen and (max-width: 1024px) {
    .single__title{
        margin-top: 54px;
        height: 220px;
        background-image:
            linear-gradient(180deg, rgba(20,14,4,0.34) 0%, rgba(20,14,4,0.16) 45%, rgba(20,14,4,0.42) 100%),
            url(/wp-content/themes/resocaba__theme/images/single/single__bg--sp.png);
    }
    .single__title h1{
        margin-top: 0;
        font-size: 22px;
    }
}
@media only screen and (max-width: 768px) {
    .single__title h1{
        font-size: 19px;
        line-height: 1.6;
        letter-spacing: 0.02em;
    }
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	content（本文の器）
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.single__content{
    background: var(--rc-ground);
    padding: 56px 0 72px;
}
.single__content--inner{
    max-width: 760px;
    margin: 0 auto;
}
@media only screen and (max-width: 1024px) {
    .single__content{
        background: var(--rc-ground);
        padding: 36px 0 56px;
    }
    .single__content--inner{
        max-width: 100%;
        padding: 0 20px;
    }
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	本文

	和文の長文なので、行間は 1.5 では詰まりすぎます。
	1.95 まで開き、段落間も行間より広く取って、読む列を作ります。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.single__content--inner{
    font-family: "NotoSerifJP", serif;
    color: var(--rc-ink);
}
.single__content--inner > p{
    font-size: 16px;
    line-height: 1.95;
    letter-spacing: 0.02em;
    margin: 0 0 26px;
    color: var(--rc-ink);
}
.single__content--inner > p > strong,
.single__content--inner li > strong{
    font-weight: 600;
    color: var(--rc-brand);
}

/* リンク：もとは本文と同じ色で下線も無く、押せることが分かりませんでした。
   地色になじむ金の下線を敷き、ホバーで太らせます。 */
.single__content--inner a{
    color: var(--rc-brand);
    text-decoration: none;
    background-image: linear-gradient(var(--rc-gold), var(--rc-gold));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 1px;
    padding-bottom: 1px;
    transition: background-size 0.15s ease, color 0.15s ease;
}
.single__content--inner a:hover,
.single__content--inner a:focus-visible{
    color: var(--rc-deep);
    background-size: 100% 2px;
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	見出し

	もとは h2 が 18px、本文が 15px で、ほとんど差がありませんでした。
	h2 の上に金の短罫を置き、字送りを開いて「章の頭」だと分かるようにします。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.single__content--inner > h2{
    position: relative;
    color: var(--rc-brand);
    font-family: "NotoSerifJP", serif;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: 0.03em;
    margin: 64px 0 20px;
    padding-top: 20px;
    scroll-margin-top: 88px;
}
.single__content--inner > h2::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 2px;
    background: var(--rc-gold);
}
.single__content--inner > h2:first-child{
    margin-top: 0;
}
.single__content--inner > h3{
    color: var(--rc-brand);
    font-family: "NotoSerifJP", serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.02em;
    margin: 40px 0 14px;
    padding-left: 14px;
    border-left: 3px solid var(--rc-gold);
    scroll-margin-top: 88px;
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	扉の写真（本文いちばん上のアイキャッチ）

	アイキャッチは切り抜かず、網掛けもかけず、原寸の比率のまま見せます。
	記事ヘッダーに敷くと画像内の国名とタイトルが重なるため、
	ここに置くことで写真をそのまま楽しめるようにしています。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.rc-lead{
    margin: 0 0 30px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--rc-deep);
}
.rc-lead__img{
    display: block;
    width: 100%;
    height: auto;
}
@media only screen and (max-width: 768px) {
    .rc-lead{
        margin-bottom: 22px;
    }
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	本文中の図解

	その記事が数えた値をそのまま絵にしたものです。
	写真ではないので枠は付けず、地色になじませます。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.rc-chart{
    margin: 6px 0 30px;
}
.rc-chart img{
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rc-rule);
    border-radius: 3px;
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	本文中の街並み写真

	その国の都市がどんな場所かを見せるための写真です。
	掲載店舗の写真ではないため、キャプションで必ず断っています。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.rc-photo{
    margin: 8px 0 32px;
}
.rc-photo img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
}
.rc-photo figcaption{
    margin-top: 8px;
    font-family: "NotoSansJP", sans-serif;
    font-size: 12px;
    line-height: 1.7;
    color: var(--rc-mute);
}
@media only screen and (max-width: 768px) {
    .rc-photo{
        margin-bottom: 24px;
    }
    .rc-photo figcaption{
        font-size: 11.5px;
    }
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	記事メタ（カテゴリ・日付）

	「いつ数えた情報か」は読者の判断材料なので、本文の頭に置きます。
	事実の側なのでゴシック。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.rc-meta{
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 28px;
    font-family: "NotoSansJP", sans-serif;
    font-size: 12px;
    letter-spacing: 0.08em;
}
.rc-meta__cat{
    padding: 5px 12px;
    border: 1px solid var(--rc-rule);
    border-radius: 2px;
    color: var(--rc-brand);
    background: var(--rc-paper);
}
.rc-meta__date{
    color: var(--rc-mute);
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	もくじ

	記事が長いので、何が書いてあるか先に見せます。
	番号は「順番がある」ことを示す情報なので付けています（飾りではありません）。
	番号と表の見出しはゴシック、見出し文は本文と同じ明朝。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.rc-toc{
    margin: 0 0 48px;
    padding: 26px 30px 10px;
    background: var(--rc-paper);
    border: 1px solid var(--rc-rule);
    border-radius: 3px;
}
.rc-toc__label{
    margin: 0 0 14px;
    font-family: "NotoSansJP", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--rc-brand);
}
.rc-toc__list{
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}
.rc-toc__item{
    border-top: 1px solid var(--rc-rule);
}
.rc-toc__item a{
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 13px 0;
    text-decoration: none;
    /* 本文のリンク下線が効かないよう、ここでは背景線を使いません */
    background-image: none;
}
.rc-toc__num{
    flex: none;
    font-family: "NotoSansJP", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--rc-gold);
}
.rc-toc__text{
    font-family: "NotoSerifJP", serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--rc-ink);
}
.rc-toc__item a:hover .rc-toc__text,
.rc-toc__item a:focus-visible .rc-toc__text{
    color: var(--rc-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	箇条書き

	本文では「・」や「1.」で書かれた行を、inc/article.php が
	本物の ul / ol に変換しています。字下げが効くようになります。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.single__content--inner .rc-list{
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}
.single__content--inner .rc-list li{
    position: relative;
    padding-left: 1.35em;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: 0.02em;
}
.single__content--inner .rc-list li::before{
    content: "";
    position: absolute;
    left: 0.25em;
    top: 0.82em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--rc-gold);
}
/* 番号付きは、順番そのものが情報（確認する順番）なので数字を残す */
.single__content--inner .rc-list--num{
    counter-reset: rcnum;
}
.single__content--inner .rc-list--num li{
    counter-increment: rcnum;
    padding-left: 2.1em;
}
.single__content--inner .rc-list--num li::before{
    content: counter(rcnum);
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    text-align: center;
    border-radius: 50%;
    background: var(--rc-brand);
    color: var(--rc-ground);
    font-family: "NotoSansJP", sans-serif;
    font-size: 11px;
    font-weight: 600;
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	テーブル

	求人票から数えた値が入る、この記事群の中心です。
	横に広い表が見切れないよう、スクロールは figure 側で受けます。
	table 自体に display:block を指定すると表組みが崩れて背景がはみ出すため、
	table は display:table のままにしています。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.single__content--inner .wp-block-table{
    margin: 0 0 30px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.single__content--inner .wp-block-table > table,
.single__content--inner > table{
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    background: var(--rc-paper);
    font-size: 15px;
    line-height: 1.75;
}
.single__content--inner .wp-block-table th,
.single__content--inner .wp-block-table td,
.single__content--inner > table th,
.single__content--inner > table td{
    border: 1px solid var(--rc-rule);
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    word-break: break-word;
}
/* 見出し行は「事実の側」なのでゴシック */
.single__content--inner .wp-block-table thead th,
.single__content--inner > table thead th{
    background: #F5EAD0;
    color: var(--rc-brand);
    font-family: "NotoSansJP", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.single__content--inner .wp-block-table tbody th{
    background: #FBF4E2;
    color: var(--rc-brand);
    font-weight: 600;
}
.single__content--inner .wp-block-table tbody tr:nth-child(even) td{
    background: #FDFAF2;
}
/* 出典・時点の注記。事実の側なのでゴシック。 */
.single__content--inner .wp-block-table figcaption,
.single__content--inner .wp-element-caption{
    margin-top: 10px;
    font-family: "NotoSansJP", sans-serif;
    font-size: 12px;
    line-height: 1.75;
    color: var(--rc-mute);
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	末尾の注記（※ではじまる最後の段落）

	「いつ時点の情報か」の断りです。本文と地続きだと読み飛ばされるので、
	上に細罫を引いてゴシックに落とします。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.single__content--inner > p:last-child{
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--rc-rule);
    font-family: "NotoSansJP", sans-serif;
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--rc-mute);
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	スマートフォン
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width: 768px) {
    .single__content--inner > p,
    .single__content--inner .rc-list li{
        font-size: 15.5px;
        line-height: 1.9;
    }
    .single__content--inner > h2{
        font-size: 19px;
        margin: 48px 0 16px;
        padding-top: 16px;
    }
    .single__content--inner > h3{
        font-size: 16px;
        margin: 32px 0 12px;
    }
    .rc-toc{
        padding: 22px 20px 6px;
        margin-bottom: 36px;
    }
    .rc-toc__text{
        font-size: 14px;
    }
    .single__content--inner .wp-block-table > table,
    .single__content--inner > table{
        font-size: 13px;
    }
    .single__content--inner .wp-block-table th,
    .single__content--inner .wp-block-table td,
    .single__content--inner > table th,
    .single__content--inner > table td{
        padding: 9px 11px;
    }
    .single__content--inner .wp-block-table thead th,
    .single__content--inner > table thead th{
        font-size: 12px;
    }
    .single__content--inner .wp-block-table figcaption,
    .single__content--inner .wp-element-caption{
        font-size: 11.5px;
    }
}


/* 動きを減らす設定を尊重する */
@media (prefers-reduced-motion: reduce) {
    .single__content--inner a{
        transition: none;
    }
}