@charset "UTF-8";

/* ==========================================================================
   pages.css — 下層ページ共通レイアウト

   本番 https://jc766.com/saisinjohou/ の実測に合わせている（1440px時）。

     パンくず   1160px @x133 / y=101 / h=41、14px 500 #333
     見出し     923px  @x133 / y=192 / 26px 600 #333 センター
     区切り線   923px  1px solid #F5F5F5
     本文       923px  @x133
     サイド     207px  @x1086（モバイルでは非表示）
                見出しは背景 #0097D7・白14px 500・padding 7px 0
   ========================================================================== */

/* --------------------------------------------------------------------------
   パンくず
   -------------------------------------------------------------------------- */

/* 本番はコンテナから左右10px内側、上下10pxの余白で行の高さが41pxになる */
.breadcrumb {
	display: flex;
	align-items: center;
	height: 21px;
	margin: 10px;
	color: var(--scjc-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 21px;
}

.breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.breadcrumb a:hover {
	text-decoration: underline;
}

.breadcrumb__sep {
	margin-inline: 6px;
}

/* --------------------------------------------------------------------------
   本文 + サイドバーの2カラム
   -------------------------------------------------------------------------- */

/* 本番はパンくず(y=111,h=21)の下から本文・サイドの2カラムが y=192 で始まる。
   パンくずの下マージンは親を突き抜けて相殺されるため、ここで60px確保する。 */
.page-layout {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	margin-top: 60px;
}

/* 理事長メッセージ一覧だけはパンくずが無く、ヘッダー直下50pxから始まる */
.page-layout--no-breadcrumb {
	margin-top: 50px;
}

.page-layout__main {
	flex: 0 0 923px;
	width: 923px;
	min-width: 0;
}

.page-layout__side {
	flex: 0 0 207px;
	width: 207px;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   ページ見出し
   -------------------------------------------------------------------------- */

.page-title {
	margin: 0;
	color: var(--scjc-text);
	font-size: 26px;
	font-weight: 600;
	line-height: 40px;
	text-align: center;
}

.page-title__divider {
	height: 0;
	margin: 32px 0 0;
	border-top: 1px solid #f5f5f5;
}

/* --------------------------------------------------------------------------
   サイドバー
   -------------------------------------------------------------------------- */

.page-side__heading {
	margin: 0;
	padding: 7px 0;
	background: var(--scjc-blue);
	color: var(--scjc-white);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-align: center;
}

.page-side__body {
	margin-top: 10px;
	padding-inline: 10px;
}

/* 最新情報一覧（カテゴリタブ + カード） */
.page-archive {
	margin-top: 86px;
	padding-inline: 53px;
}

/* --------------------------------------------------------------------------
   about 一覧（/about/）
   本番: 節見出し y=350 / 区切り線200px y=395 / ロゴ y=461 / 紹介文 y=641 / ボタン y=751
   -------------------------------------------------------------------------- */

.about-archive {
	margin-top: 86px;
	padding-inline: 53px;
}

.about-archive__title {
	margin: 0;
	color: var(--scjc-text);
	font-size: 22px;
	font-weight: 700;
	line-height: 30px;
	text-align: center;
}

.about-archive__divider {
	width: 200px;
	height: 0;
	margin: 15px auto;
	border-top: 1px solid var(--scjc-blue);
}

.about-archive__logo {
	display: block;
	width: 300px;
	height: 130px;
	margin: 65px auto 0;
	object-fit: contain;
}

.about-archive__intro {
	margin: 50px 0 0;
	color: #000;
	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
}

/* about のリンクボタン一覧（TOP=1カラム / /about/=2カラム） */
.about-list {
	display: grid;
	gap: 15px;
	margin-top: 50px;
}

.about-list--col1 {
	grid-template-columns: 1fr;
	margin-top: 0;
}

.about-list--col2 {
	grid-template-columns: repeat(2, 1fr);
}

/* --------------------------------------------------------------------------
   汎用の本文（固定ページ・CPT詳細）
   -------------------------------------------------------------------------- */

/* 現行サイトは親テーマ hello-elementor の theme.css にある
     .post .wp-post-image { max-height:500px; object-fit:cover; width:100% }
   に依存してアイキャッチの高さを抑えている。自作テーマは親テーマを持たないので、
   同じ指定をここで持つ（値・ブレークポイントとも hello-elementor と同一）。 */
.post .wp-post-image {
	width: 100%;
	max-height: 500px;
	object-fit: cover;
}

@media (max-width: 991px) {
	.post .wp-post-image {
		max-height: 400px;
	}
}

@media (max-width: 575px) {
	.post .wp-post-image {
		max-height: 300px;
	}
}

/* 投稿詳細は上部ブロックの直下から本文が始まる（本番も間隔ゼロ） */
.singular .jaycee-single + .entry-body {
	margin-top: 0;
}

/* 本番の本文は 923px 幅・16px・line-height 24px、区切り線の33px下から始まる。
   flow-root は本文先頭要素の上マージンが外に漏れる（マージン相殺）のを防ぐため。
   これが無いと本文ブロック全体が下にずれる。 */
.entry-body {
	display: flow-root;
	margin-top: 33px;
	color: var(--scjc-text);
	font-size: 16px;
	/* 単位なしで指定する。本文に埋め込まれたCSSが小さい文字を指定したとき、
	   行送りもその文字サイズに追従する（本番と同じ挙動）。 */
	line-height: 1.5;
}

/* 本文領域の既定フォントは本番では Roboto（Elementor のキット既定）で、
   サイト全体の M PLUS 1 は継承されない。日本語のグリフ幅は同じだが、
   行ボックスの高さ（ストラット）が変わるため画像行の高さが 2px ずれる。
   カード内の p / h2 / h3 だけが追加CSSで M PLUS 1 に戻される。 */
.entry-body {
	font-family: Roboto, sans-serif;
}

.entry-body img {
	max-width: 100%;
	height: auto;
}

/* 本文中の見出し・段落・表・リストの既定値。
   すべて本番の本文領域（.elementor-widget-theme-post-content）に
   ダミー要素を差し込んで実測した計算値。 */

/* 見出しの余白は本文側のクラスCSSに譲る（本番も要素セレクタ由来で弱い）。
   文字まわりは Elementor のキット由来でクラスより強かったので、そのまま強く当てる。 */
.entry-body :where(h2, h3, h4) {
	margin: 8px 0 16px;
}

.entry-body h2 {
	color: var(--scjc-text);
	font-size: 26px;
	font-weight: 500;
	line-height: 40px;
}

.entry-body h3 {
	color: var(--scjc-text);
	font-size: 22px;
	font-weight: 500;
	line-height: 30px;
}

.entry-body h4 {
	color: var(--scjc-text);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
}

/* p には文字サイズ・行送りを書かない（本番も .entry-body 相当からの継承だけ）。
   下マージンだけは追加CSSの p{margin-block-end:0!important} 相当として強く当てる。 */
.entry-body p {
	margin: 0;
}

/* 理事長メッセージのテンプレートだけ、段落に 1em の下余白が付く。
   本番は Elementor 側のラッパー .text-space に対する
   .text-space p{ margin-bottom:1em !important } が効いていて、
   このクラスが付くのは message の単体テンプレートだけ。 */
.single-message .entry-body p {
	margin-bottom: 1em;
}

/* 本文のリストはブラウザ既定に近い見え方（マーカーあり・字下げ40px）。
   :where() で詳細度を上げないでおくと、本文に埋め込まれた <style>
   （.housin__list など）が意図どおり上書きできる。
   li には font-size / line-height を書かない（本番も継承だけ）。 */
.entry-body :where(ul, ol) {
	margin: 0;
	padding-left: 40px;
	list-style: revert;
}

.entry-body :where(li) {
	margin: 0;
}

/* 本番の pre は等幅指定だが折り返す（white-space:pre-wrap）。
   賛助会員募集ページの本文がこれで組まれている。 */
.entry-body pre {
	margin: 16px 0;
	font-family: monospace, monospace;
	font-size: 16px;
	line-height: 24px;
	white-space: pre-wrap;
}

/* 表の既定値。:where() で詳細度を上げないでおく。
   本文に埋め込まれた表や、テーマ側の一覧表（賛助会員一覧など）が
   自前のクラスCSSで上書きできるようにするため。 */
.entry-body :where(table) {
	width: 100%;
	margin: 0 0 15px;
	border-collapse: collapse;
	font-size: 0.9em;
	line-height: 1.5;
}

.entry-body :where(th, td) {
	padding: 15px;
	border: 1px solid rgba(128, 128, 128, 0.5);
}

.entry-body :where(th) {
	font-weight: 700;
	text-align: center;
}

.entry-body a {
	color: var(--scjc-blue);
	text-decoration: none;
}

/* ファイルブロック（ビジョン2025ページのPDF）。
   本番の実測値: ボタンは 12.8px / 行送り19.2px / 角丸25.6px /
   padding 10.54px 19.06px。すべて自身の文字サイズ基準の em で書ける。 */
.entry-body .wp-block-file {
	margin-bottom: 1.5em;
	/* 本番はブロックライブラリのCSSで 0.8em（=12.8px）になっている。
	   静的HTML化するとそのCSSが読み込まれないことがあるので自前で持つ。 */
	font-size: 0.8em;
}

/* PDFプレビュー本体。本番は下マージン0（ブロックライブラリの 1em を打ち消している）。 */
.entry-body .wp-block-file__embed {
	margin-bottom: 0;
}

.entry-body .wp-block-file__button {
	display: inline-block;
	padding: 0.823em 1.489em;
	border-radius: 2em;
	background: #32373c;
	color: var(--scjc-blue);
	line-height: 1.5;
	text-decoration: none;
}

/* エディタが画像に付ける配置クラス（WordPress の定番クラス）。
   本番では親テーマ側が用意していたので、自作テーマでも同じ値で持つ。
   aligncenter だけ display:block になるため、インライン画像の
   ベースライン下の余白が出ない（＝画像の高さがそのまま行の高さになる）。 */
.entry-body img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.entry-body img.alignleft {
	display: block;
	float: left;
	margin-right: 16px;
}

.entry-body img.alignright {
	display: block;
	float: right;
	margin-left: 16px;
}


/* --------------------------------------------------------------------------
   アーカイブ見出し（カテゴリー・検索結果など）
   -------------------------------------------------------------------------- */

.archive-title {
	margin: 0 0 32px;
	color: var(--scjc-text);
	font-size: 26px;
	font-weight: 600;
	line-height: 40px;
	text-align: center;
}

/* --------------------------------------------------------------------------
   検索結果 / 404
   -------------------------------------------------------------------------- */

.search-count {
	margin: 33px 0 0;
	color: #888;
	font-size: 14px;
	line-height: 24px;
}

.search-list {
	margin-top: 20px;
	border-top: 1px solid #e5e5e5;
}

.search-item {
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding: 18px 10px;
	border-bottom: 1px solid #e5e5e5;
	color: var(--scjc-text);
	text-decoration: none;
}

.search-item:hover {
	background: #fafafa;
}

.search-item__date {
	flex: 0 0 auto;
	color: #888;
	font-size: 13px;
	font-weight: 500;
}

.search-item__title {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

.search-empty {
	margin: 33px 0 0;
	font-size: 16px;
	line-height: 30px;
}

.search-again {
	margin-top: 24px;
	max-width: 480px;
}

.search-form {
	display: flex;
	gap: 8px;
}

.search-form__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 12px;
	background: #f5f5f5;
	border-radius: 4px;
}

.search-form__submit {
	flex: 0 0 auto;
	height: 44px;
	padding-inline: 20px;
	background: var(--scjc-blue);
	color: var(--scjc-white);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.search-form__submit:hover {
	opacity: 0.88;
}

@media (max-width: 750px) {
	.search-item {
		flex-direction: column;
		gap: 4px;
		padding: 14px 6px;
	}
}

/* --------------------------------------------------------------------------
   メンバー専用ページ
   Elementor テンプレート22 / 574 の構成に合わせる。
   本番はベーシック認証がかかっているため実測での突き合わせはしていない。
   -------------------------------------------------------------------------- */

/* サイドバーを持たないページ（メンバー専用）は本文列を全幅にする */
.page-layout--full .page-layout__main {
	flex: 1 1 auto;
	width: 100%;
}

.member-section + .member-section {
	margin-top: 80px;
}

/* リンクカード（about のボタンと同じ意匠） */
.member-links {
	display: grid;
	gap: 15px;
	margin-top: 40px;
}

.member-link {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 50px;
	padding-inline: 10px;
	background: rgba(0, 151, 215, 0.6);
	border-radius: 200px;
	text-decoration: none;
	box-sizing: border-box;
}

.member-link:hover {
	background: rgba(0, 151, 215, 0.8);
}

.member-link__dot {
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--scjc-white);
}

.member-link__label {
	color: var(--scjc-white);
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
}

/* お知らせ一覧 */
.member-list {
	margin-top: 40px;
	border-top: 1px solid #e5e5e5;
}

.member-card {
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding: 18px 10px;
	border-bottom: 1px solid #e5e5e5;
	color: var(--scjc-text);
	text-decoration: none;
}

.member-card:hover {
	background: #fafafa;
}

.member-card__date {
	flex: 0 0 auto;
	color: #888;
	font-size: 13px;
	font-weight: 500;
}

.member-card__title {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

@media (max-width: 750px) {
	.member-section + .member-section {
		margin-top: 50px;
	}

	.member-link {
		height: 40px;
		padding-inline: 5px;
	}

	.member-card {
		flex-direction: column;
		gap: 4px;
		padding: 14px 6px;
	}
}

/* --------------------------------------------------------------------------
   about ボタンのモバイル調整
   本番: ボタン 292x40 / 縦の間隔10px / 紹介文との間隔50px
   ※ front.css より後に読まれるため、モバイル指定はこちら側に置く
   -------------------------------------------------------------------------- */

@media (max-width: 750px) {
	.about-list {
		gap: 10px;
	}

	.about-list--col1 {
		margin-top: 50px;
	}

	.about-list--col2 {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   タブレット（〜1201px）
   -------------------------------------------------------------------------- */

@media (max-width: 1201px) {
	.page-layout__main {
		flex: 1 1 auto;
		width: auto;
	}
}

/* --------------------------------------------------------------------------
   モバイル（〜750px）
   -------------------------------------------------------------------------- */

@media (max-width: 750px) {
	/* 縦積みにするときは align-items を stretch に戻す。
	   base の flex-start のままだと本文列が内容幅まで広がって（縮まず）
	   画面をはみ出し、横スクロールが出る。 */
	.page-layout {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.page-layout__main {
		width: auto;
		min-width: 0;
	}

	/* 本文中の長いURL等が折り返せずに画面をはみ出すのを防ぐ
	   （投稿本文に生のURLがリンクとして入っている箇所がある）。
	   表には掛けない。掛けると1文字ずつ折り返せるようになって
	   列の最小幅が変わり、行の高さが本番とずれてしまう。 */
	.entry-body :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6) {
		overflow-wrap: anywhere;
	}

	/* 本文内の広い要素（表・埋め込みなど）が画面をはみ出さないように */
	.entry-body img,
	.entry-body iframe,
	.entry-body video {
		max-width: 100%;
		height: auto;
	}

	/* 幅の広い表は本番と同じ列幅のまま（＝行の高さも本番と同じ）にして、
	   はみ出しぶんは表を包む箱の中でスクロールさせる。
	   表自体に overflow を付けると列が縮んで文字が余計に折り返し、
	   行の高さが本番とずれてしまう。
	   ※本番はページごと横スクロールする（表がビューポートをはみ出す）。 */
	.entry-body .table01,
	.entry-body .scjc-block:has(> table),
	.entry-body .scjc-cell:has(> table) {
		overflow-x: auto;
	}

	/* 本番もサイドバーはモバイルで非表示（elementor-hidden-mobile） */
	.page-layout__side {
		display: none;
	}

	.page-title {
		font-size: 22px;
		line-height: 32px;
	}

	.page-title__divider {
		margin-top: 20px;
	}
}