/*
Theme Name: Flatsome Child
Theme URI: https://fukusijinzai.com/
Description: 一般社団法人 福祉人財育成協議会 サイト用の Flatsome 子テーマ。親テーマ(flatsome)は直接編集しないこと。
Author: hiruandon
Template: flatsome
Version: 1.0.0
Text Domain: flatsome-child
*/

/* ============================================================
   福祉人財育成協議会 — 本文まわり
   現行サイトの最大の問題は「縦長スライド画像を画面幅に潰していた」こと。
   ここは全部テキストで組み、スマホ幅を基準に設計する。
   ============================================================ */

:root {
	--fj-primary: #16697a;
	--fj-primary-dark: #0f4c58;
	--fj-accent: #e08a2e;
	--fj-accent-soft: #fdf3e5;
	--fj-ink: #23303a;
	--fj-muted: #5d6d78;
	--fj-line: #dde5e9;
	--fj-bg-soft: #f2f7f8;
}

body {
	color: var(--fj-ink);
	line-height: 1.9;
	letter-spacing: .02em;
}

.fj-page p,
.fj-page li {
	font-size: 1.0625rem;
}

/* 見出し ------------------------------------------------ */
.fj-page h1, .fj-page h2, .fj-page h3, .fj-page h4 {
	color: var(--fj-primary-dark);
	line-height: 1.5;
	letter-spacing: .01em;
}
.fj-page h1 { font-size: clamp(1.55rem, 5.2vw, 2.3rem); margin-bottom: .6em; }
.fj-page h2 {
	font-size: clamp(1.3rem, 4.4vw, 1.75rem);
	margin: 2.6rem 0 1.1rem;
	padding-left: .7em;
	border-left: 6px solid var(--fj-accent);
}
.fj-page h3 {
	font-size: clamp(1.1rem, 3.6vw, 1.3rem);
	margin: 2rem 0 .7rem;
	padding-bottom: .35em;
	border-bottom: 2px solid var(--fj-line);
}
.fj-page h4 {
	font-size: 1.05rem;
	margin: 1.4rem 0 .4rem;
	color: var(--fj-primary);
}

/* リード文 ---------------------------------------------- */
.fj-lead {
	font-size: clamp(1.02rem, 3.4vw, 1.18rem);
	color: var(--fj-muted);
	margin-bottom: 2rem;
}

/* ヒーロー ---------------------------------------------- */
.fj-hero {
	background: linear-gradient(135deg, var(--fj-primary) 0%, var(--fj-primary-dark) 60%, #0b3a44 100%);
	color: #fff;
	padding: clamp(2.4rem, 8vw, 4.5rem) clamp(1.2rem, 5vw, 3rem);
	border-radius: 10px;
	margin-bottom: 2.4rem;
}
.fj-hero h1 { color: #fff; margin: 0 0 .5em; }
.fj-hero .fj-hero-sub {
	color: rgba(255,255,255,.92);
	font-size: clamp(1rem, 3.4vw, 1.2rem);
	margin: 0 0 1.4rem;
}
.fj-hero .fj-vuca {
	font-size: .82rem;
	color: rgba(255,255,255,.75);
	border-top: 1px solid rgba(255,255,255,.28);
	padding-top: .8rem;
	margin: 1.2rem 0 0;
	line-height: 1.8;
}
.fj-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

/* ボタン ------------------------------------------------ */
.fj-btn, a.fj-btn {
	display: inline-block;
	background: var(--fj-accent);
	color: #fff !important;
	padding: .8em 1.6em;
	border-radius: 4px;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.4;
}
.fj-btn:hover { background: #c9761f; color: #fff !important; }
.fj-btn--ghost, a.fj-btn--ghost {
	background: transparent;
	border: 2px solid rgba(255,255,255,.85);
	color: #fff !important;
}
.fj-btn--ghost:hover { background: rgba(255,255,255,.15); }
.fj-btn--line { background: var(--fj-primary); }
.fj-btn--line:hover { background: var(--fj-primary-dark); }

/* カード群 ---------------------------------------------- */
.fj-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 1.6rem 0 2.4rem;
	padding: 0;
	list-style: none;
}
@media (min-width: 620px) { .fj-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .fj-cards--3 { grid-template-columns: repeat(3, 1fr); } }
.fj-card {
	background: #fff;
	border: 1px solid var(--fj-line);
	border-top: 4px solid var(--fj-primary);
	border-radius: 6px;
	padding: 1.3rem 1.2rem;
}
.fj-card h3 {
	margin: 0 0 .5rem;
	border: 0;
	padding: 0;
	font-size: 1.1rem;
}
.fj-card p { margin: 0 0 .6rem; font-size: .97rem; }
.fj-card p:last-child { margin-bottom: 0; }
.fj-card--accent { border-top-color: var(--fj-accent); }

/* 手順 / ステップ --------------------------------------- */
.fj-steps { list-style: none; margin: 1.4rem 0 2.2rem; padding: 0; counter-reset: fjstep; }
.fj-steps > li {
	position: relative;
	background: #fff;
	border: 1px solid var(--fj-line);
	border-radius: 6px;
	padding: 1.1rem 1.1rem 1.1rem 3.5rem;
	margin-bottom: .8rem;
}
.fj-steps > li::before {
	counter-increment: fjstep;
	content: counter(fjstep);
	position: absolute;
	left: 1rem; top: 1.05rem;
	width: 1.9rem; height: 1.9rem;
	background: var(--fj-primary);
	color: #fff;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: .95rem; font-weight: 700;
}
.fj-steps > li strong { display: block; color: var(--fj-primary-dark); margin-bottom: .2rem; }
.fj-steps > li p { margin: .3rem 0 0; font-size: .97rem; }

/* 箱 ---------------------------------------------------- */
.fj-box {
	background: var(--fj-bg-soft);
	border-radius: 6px;
	padding: 1.2rem 1.3rem;
	margin: 1.4rem 0 2rem;
}
.fj-box > :first-child { margin-top: 0; }
.fj-box > :last-child { margin-bottom: 0; }
.fj-box--accent { background: var(--fj-accent-soft); border-left: 5px solid var(--fj-accent); }
.fj-box--quote {
	background: transparent;
	border-left: 5px solid var(--fj-primary);
	font-size: clamp(1.02rem, 3.4vw, 1.15rem);
	font-weight: 700;
	color: var(--fj-primary-dark);
}

.fj-note {
	font-size: .9rem;
	color: var(--fj-muted);
	background: #f7f8f9;
	border: 1px dashed var(--fj-line);
	border-radius: 4px;
	padding: .8rem 1rem;
	margin: 1.2rem 0;
}
.fj-note p { font-size: .9rem !important; margin: 0 0 .4rem; }
.fj-note p:last-child { margin-bottom: 0; }

/* リスト ------------------------------------------------ */
.fj-list { list-style: none; padding: 0; margin: 1rem 0 1.8rem; }
.fj-list > li {
	position: relative;
	padding: .55rem 0 .55rem 1.5rem;
	border-bottom: 1px dotted var(--fj-line);
}
.fj-list > li::before {
	content: "";
	position: absolute; left: .25rem; top: 1.25rem;
	width: .5rem; height: .5rem;
	background: var(--fj-accent);
	border-radius: 50%;
}
.fj-list > li:last-child { border-bottom: 0; }
.fj-list--plain > li::before { display: none; }
.fj-list--plain > li { padding-left: 0; }

.fj-contact { list-style: none; padding: 0; margin: 1rem 0; }
.fj-contact li { padding: .4rem 0; border-bottom: 1px dotted var(--fj-line); }
.fj-contact li span {
	display: inline-block;
	min-width: 5.5em;
	font-weight: 700;
	color: var(--fj-primary-dark);
}

/* 表 — スマホで横スクロールさせる ------------------------ */
.fj-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.2rem 0 2rem; }
.fj-table {
	width: 100%;
	min-width: 460px;
	border-collapse: collapse;
	font-size: .97rem;
	background: #fff;
}
.fj-table th, .fj-table td {
	border: 1px solid var(--fj-line);
	padding: .7rem .8rem;
	text-align: left;
	vertical-align: top;
	line-height: 1.75;
}
.fj-table th {
	background: var(--fj-bg-soft);
	color: var(--fj-primary-dark);
	white-space: nowrap;
	font-weight: 700;
}
.fj-table--stack { min-width: 0; }
@media (max-width: 560px) {
	.fj-table--stack, .fj-table--stack tbody, .fj-table--stack tr, .fj-table--stack th, .fj-table--stack td { display: block; width: 100%; }
	.fj-table--stack tr { border: 1px solid var(--fj-line); margin-bottom: .8rem; }
	.fj-table--stack th, .fj-table--stack td { border: 0; }
	.fj-table--stack th { border-bottom: 1px solid var(--fj-line); }
}

/* 資料画像 ---------------------------------------------- */
.fj-figure { margin: 1.6rem 0 2rem; }
.fj-figure img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--fj-line);
	border-radius: 4px;
	display: block;
}
.fj-figure figcaption {
	font-size: .88rem;
	color: var(--fj-muted);
	margin-top: .5rem;
	line-height: 1.7;
}
.fj-figure--narrow img { max-width: 520px; margin-inline: auto; }

/* CTA --------------------------------------------------- */
.fj-cta {
	background: var(--fj-primary);
	color: #fff;
	border-radius: 8px;
	padding: clamp(1.6rem, 5vw, 2.4rem);
	text-align: center;
	margin: 3rem 0 1rem;
}
.fj-cta h2 { color: #fff; border: 0; padding: 0; margin: 0 0 .6rem; }
.fj-cta p { color: rgba(255,255,255,.92); margin: 0 0 1.2rem; }
.fj-cta a.fj-btn { background: #fff; color: var(--fj-primary-dark) !important; }
.fj-cta a.fj-btn:hover { background: var(--fj-accent-soft); }

/* 会員限定の壁 ------------------------------------------ */
.fj-locked {
	border: 2px dashed var(--fj-accent);
	background: var(--fj-accent-soft);
	border-radius: 8px;
	padding: 1.6rem;
	text-align: center;
}

/* 理事プロフィール -------------------------------------- */
.fj-people { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.4rem 0 2rem; }
@media (min-width: 720px) { .fj-people { grid-template-columns: 1fr 1fr; } }
.fj-person {
	background: #fff;
	border: 1px solid var(--fj-line);
	border-radius: 6px;
	padding: 1.2rem;
}
.fj-person h3 { margin: 0 0 .1rem; border: 0; padding: 0; font-size: 1.12rem; }
.fj-person .fj-role { display: block; font-size: .85rem; color: var(--fj-accent); font-weight: 700; margin-bottom: .5rem; }
.fj-person p { margin: 0; font-size: .96rem; }

/* 年表 -------------------------------------------------- */
.fj-timeline { list-style: none; margin: 1.2rem 0 2rem; padding: 0; }
.fj-timeline > li {
	display: grid;
	grid-template-columns: 1fr;
	gap: .1rem .9rem;
	padding: .8rem 0;
	border-bottom: 1px solid var(--fj-line);
}
@media (min-width: 620px) { .fj-timeline > li { grid-template-columns: 10.5em 1fr; } }
.fj-timeline .fj-when { font-weight: 700; color: var(--fj-primary); font-size: .95rem; }

/* 目次っぽいリンク列 ------------------------------------ */
.fj-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 2rem; padding: 0; list-style: none; }
.fj-jump a {
	display: inline-block;
	border: 1px solid var(--fj-primary);
	color: var(--fj-primary);
	border-radius: 999px;
	padding: .35em 1em;
	font-size: .92rem;
	text-decoration: none;
}
.fj-jump a:hover { background: var(--fj-primary); color: #fff; }

/* Contact Form 7 ---------------------------------------- */
.wpcf7 .fj-form label { display: block; font-weight: 700; margin: 1.1rem 0 .3rem; color: var(--fj-primary-dark); }
.wpcf7 .fj-form .fj-req { color: #c0392b; font-size: .82rem; margin-left: .4em; }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 textarea {
	width: 100%;
	font-size: 16px; /* iOS のズーム暴発を防ぐ */
}
.wpcf7 textarea { min-height: 11em; }
.wpcf7-list-item { margin-left: 0; }

/* ============================================================
   日本語フォント指定
   Flatsome の既定は Lato で日本語グリフを持たない。
   外部フォントを読みに行かず、OS 標準の日本語フォントで整える。
   ============================================================ */
body,
button, input, select, textarea,
.button, .nav > li > a, h1, h2, h3, h4, h5, h6 {
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
	             "Noto Sans JP", "Yu Gothic Medium", "Yu Gothic", YuGothic, Meiryo,
	             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6, .nav > li > a { font-weight: 700; }

/* ブログのギャラリー */
.fj-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .6rem;
	margin: 1.8rem 0;
}
@media (min-width: 700px) { .fj-gallery { grid-template-columns: repeat(4, 1fr); } }
.fj-gallery figure { margin: 0; }
.fj-gallery img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

/* 読み幅 — 本文が長いページで1行が伸びすぎないように */
.fj-page { max-width: 860px; margin-inline: auto; }
.fj-page .fj-hero,
.fj-page .fj-cta { max-width: none; }

/* 記事ページ・アーカイブの余白 */
.page-wrapper { padding-top: 2rem; }

/* Flatsome のフッター */
.footer-wrapper .footer-secondary { font-size: .9rem; }

/* スクリーンリーダー用 */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* 画像は必ず親幅に収める（現行サイトの最大の問題への対処） */
.fj-page img, .entry-content img { max-width: 100%; height: auto; }

/* 印刷 */
@media print {
	.fj-hero, .fj-cta { background: none !important; color: #000 !important; }
	.fj-hero h1, .fj-cta h2 { color: #000 !important; }
}

/* ロゴ画像を持たないのでサイト名をテキストで見せる。
   Flatsome の既定ロゴ（FLATSOME）は site_logo を空にして外している。 */
#logo { max-width: 66vw; }
#logo a {
	display: block;
	font-size: clamp(.95rem, 3.8vw, 1.35rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .01em;
	color: var(--fj-primary-dark);
	white-space: normal;
	text-decoration: none;
}
#logo a:hover { color: var(--fj-primary); }
@media (min-width: 850px) { #logo { max-width: 26rem; } }

/* ヘッダーのナビ */
.header-nav .nav > li > a { font-size: .95rem; }

/* モバイルメニュー内の文字 */
.mfp-content .nav-vertical li > a { font-size: 1rem; }

/* Flatsome はカスタマイザーの CSS を head にインラインで吐くので、
   ロゴのサイズだけは !important で押さえる */
#logo a, .header-logo a { font-size: 15px !important; }
@media (min-width: 850px) { #logo a, .header-logo a { font-size: 19px !important; } }