@charset "UTF-8";

/* ==================================================================
 * WordPress化にともなう補正CSS
 * ------------------------------------------------------------------
 * ★ このファイルには「デザインの変更」は入っていません。
 *   プラグイン（Contact Form 7 / Instagram Feed）が出力するHTMLを
 *   既存デザインと同じ見た目に揃えるための指定と、
 *   WordPress化で新しく追加した要素の最小限の指定だけが入っています。
 *
 *   既存の style.css / news.css / reset.css は一切変更していません。
 *   元の状態に戻したい場合は、inc/enqueue.php から
 *   このファイルの読み込みを外してください。
 *
 * 【目次】
 *   1. ヘッダーロゴ（下層ページ）
 *   2. 下層ページのタイトル（お知らせ詳細）
 *   3. トップページのお知らせ
 *   4. お知らせ詳細の前後記事リンク
 *   5. Contact Form 7（お問い合わせフォーム）
 *   6. Instagram Feed（インスタグラム）
 *   7. 管理者向けの注意書き
 * ================================================================== */


/* ==================================================================
 * 1. ヘッダーロゴ（下層ページ）
 * ------------------------------------------------------------------
 * 下層ページではロゴを <h1> ではなく <div> で出力しています
 * （ページタイトルを <h1> にして、1ページ1つに保つため）。
 * 見た目は style.css の「header h1」とまったく同じです。
 * ================================================================== */
header .site-logo {
	font-size: clamp(1.2rem, calc(1.2rem + (1.6rem - 1.2rem) * ((100vw - 767px) / 363px)), 1.6rem);
	width: 244px;
	line-height: 1;
	position: absolute;
	top: 0.85em;
	left: 1.6em;
}

@media screen and (max-width: 767px) {
	header .site-logo {
		width: 13rem;
		top: 1.5rem;
		left: 1.35rem;
	}
}


/* ==================================================================
 * 2. 下層ページのタイトル（お知らせ詳細）
 * ------------------------------------------------------------------
 * お知らせ詳細ページでは、上部の「お知らせ」を <div> にしています
 * （記事タイトルを <h1> にするため）。
 * 見た目は style.css の「.pageMv h1」とまったく同じです。
 * ================================================================== */
.pageMv .pageMv__title {
	font-size: clamp(3rem, 3.6603221083vw, 5rem);
	font-weight: 500;
	line-height: 1.5;
	color: #18284d;
	text-align: center;
	z-index: 3;
}

/* お知らせ詳細の投稿日（タイトルのすぐ下）*/
.pageSub .newsDetail .CMS-NEWS-TIME {
	margin-top: -1.5rem;
	margin-bottom: 3rem;
}


/* ==================================================================
 * 3. トップページのお知らせ
 * ------------------------------------------------------------------
 * 記事タイトルをクリックできるようにリンクにしています。
 * 同じ枠内にある「一覧を見る」ボタンのスタイル（.topNews__box a）が
 * 適用されてしまうため、それを打ち消して本文と同じ見た目に戻します。
 * ================================================================== */
.topNews__box .topNews__box_text a {
	width: auto;
	color: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	position: static;
	display: inline;
	text-align: inherit;
}

/* 「一覧を見る」に付く矢印アイコンを、記事タイトルには付けない */
.topNews__box .topNews__box_text a::before {
	content: none;
}

/* お知らせを2〜3件表示したときに、縦に並べる（1件のときは使われません）*/
.topNews__list {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1.5em;
}

/*
 * 日付とタイトルがくっついてしまうのを防ぐ。
 *
 * 【症状】
 * 記事タイトルが短いと、日付と記事タイトルが間隔なしで表示されていました。
 *   修正前： 2026.08.04ホームページをリニューアルいたしました
 *   修正後： 2026.08.04　　ホームページをリニューアルいたしました
 * あわせて、左の縦の区切り線も本来より右へずれていました。
 *
 * 【なぜ起きるか】
 * この行（.topNews__box）は「見出し／日付＋タイトル／一覧を見る」の3つを
 * 左・中央・右に振り分けています（justify-content: space-between）。
 * 中央のかたまり（.topNews__content）だけ幅の指定が無いため、
 * 中身の文字数ぶんの幅になります。
 *
 * さらに日付（.topNews__box_time）の幅が「中央のかたまりの14%」という
 * 割合指定のため、タイトルが短いと日付の枠まで一緒に細くなり、
 * 「2026.08.04」の文字が枠からはみ出してタイトルに接してしまいます。
 *   実測：中央のかたまり 617px→448px、日付の枠 86px→63px
 *
 * 静的サイトでは長いダミー文章が入っていたため枠が広く、
 * この問題が表に出ていませんでした。
 *
 * 【対処】
 * 中央のかたまりに「余った幅をすべて使う」よう指定します。
 * これで日付の枠が十分な幅（89px）になり、記事タイトルの長さが変わっても
 * 日付と区切り線の位置が動かなくなります。
 *
 * ※ 同じ30文字のタイトルで静的サイトと比較し、全要素が0.6px以内で
 *   一致することを実測で確認済みです。
 * ※ スマートフォン表示（767px以下）では上下に並ぶ形に変わるため、
 *   この指定は影響しません（実測で変化なしを確認済み）。
 */
.topNews__box .topNews__content {
	flex: 1;
}


/* ==================================================================
 * 4. お知らせ詳細の前後記事リンク
 * ------------------------------------------------------------------
 * 静的サイトには無かった要素のため、新しく指定しています。
 * ================================================================== */
.newsDetail__nav {
	display: flex;
	justify-content: space-between;
	gap: 3rem;
	margin-top: 6rem;
	padding-top: 3rem;
	border-top: 1px solid #ddd;
}

.newsDetail__nav a {
	flex: 1;
	color: #18284d;
	font-size: 1.5rem;
	line-height: 1.6;
}

.newsDetail__nav a span {
	display: block;
	margin-bottom: 0.5em;
	color: #999;
	font-size: 1.3rem;
}

.newsDetail__nav-next {
	text-align: right;
}

@media screen and (max-width: 767px) {
	.newsDetail__nav {
		flex-direction: column;
		gap: 2rem;
	}

	.newsDetail__nav-next {
		text-align: left;
	}
}


/* ==================================================================
 * 5. Contact Form 7（お問い合わせフォーム）
 * ------------------------------------------------------------------
 * Contact Form 7 は入力欄を <span class="wpcf7-form-control-wrap"> で
 * 包んで出力します。そのままだと style.css の
 * 「.CMS-FORM-GROUP input { flex:1 }」が効かなくなるため、
 * 包んでいる span 側に同じ指定をして元のレイアウトに戻します。
 * ================================================================== */

/* 入力欄の横幅（ラベルの右側いっぱいに広げる）
 *
 * flex-direction: inherit が重要です。
 * 元のHTMLでは入力欄が .CMS-FORM-GROUP の直接の子（フレックスの子要素）
 * だったため、style.css の「form textarea { height: 20rem }」が
 * 打ち消されて2行分の高さで表示されていました。
 * span で包まれるとこの打ち消しが効かなくなり、スマホで
 * テキストエリアが縦に伸びてしまうため、span 自身を
 * 親と同じ方向のフレックスにして元の状態を再現しています。
 */
.CMS-FORM-GROUP .wpcf7-form-control-wrap {
	display: flex;
	flex-direction: inherit;
	flex: 1;
}

/* 「号室」など、横幅を狭くする入力欄
   幅の指定は包んでいる span 側で行い、中の入力欄は span いっぱいに広げます
   （両方に35%が掛かって二重に狭くなるのを防ぐため）*/
.CMS-FORM-GROUP .wpcf7-form-control-wrap:has(.input_half) {
	flex: inherit;
	flex-basis: 35%;
}

.CMS-FORM-GROUP .wpcf7-form-control-wrap .input_half {
	flex: 1;
}

@media screen and (max-width: 767px) {
	/* スマホでは項目が縦並びになるため、横幅いっぱいに */
	.CMS-FORM-GROUP .wpcf7-form-control-wrap,
	.CMS-FORM-GROUP .wpcf7-form-control-wrap:has(.input_half) {
		flex: none;
		width: 100%;
	}
}

/* 未入力・形式エラーのときに入力欄の下に出るメッセージ
 *
 * スマホでは入力欄が縦並びのため、そのまま入力欄の下に表示されます。
 * パソコンではラベルと入力欄が横並びのため、下の @media 内で
 * エラー文だけを次の行へ送っています。
 */
.CMS-FORM-GROUP .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.6em;
	font-size: 0.85em;
	line-height: 1.5;
}

@media screen and (min-width: 768px) {
	/*
	 * パソコン表示のとき、エラー文を入力欄の「下」に表示する。
	 *
	 * Contact Form 7 はエラー文を入力欄と同じ枠の中に追加するため、
	 * そのままだと入力欄の右隣に並んでしまいます。
	 * :has() を使い「エラーが出ているときだけ」折り返しを有効にするので、
	 * 通常時のレイアウトには一切影響しません。
	 */
	.CMS-FORM-GROUP .wpcf7-form-control-wrap:has(.wpcf7-not-valid-tip) {
		flex-wrap: wrap;
	}

	.CMS-FORM-GROUP .wpcf7-not-valid-tip {
		flex: 0 0 100%;
	}
}

/* エラーが出ている入力欄を赤枠にして分かりやすくする */
.CMS-FORM-GROUP .wpcf7-not-valid {
	border-color: #dc3232;
}

/* 「同意する」チェックボックス（中央寄せ）
   ※ 元デザインの .privacy-check と同じ見た目にしています */
.CMS-FORM-GROUP .wpcf7-acceptance {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.CMS-FORM-GROUP .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.CMS-FORM-GROUP .wpcf7-acceptance label {
	display: flex;
	align-items: center;
	justify-content: center;
	/* margin: 0 auto は元デザインの .privacy-check と同じ指定。
	   style.css の「form div label { margin-bottom: 10px }」を打ち消し、
	   チェックボックス行の高さを元と同じにします */
	margin: 0 auto;
	cursor: pointer;
}

/* 送信ボタンは中央に配置（.CMS-FORM-GROUP.notline の中）*/
.CMS-FORM-GROUP.notline .common-btn {
	margin: 0 auto;
}

/* 送信中はボタンを押せないようにして、二重送信を防ぐ */
.wpcf7 form.submitting .common-btn {
	opacity: 0.5;
	pointer-events: none;
}

/* 送信結果・エラーのメッセージ（フォームの下に中央表示）
 *
 * ★ セレクタに form.wpcf7-form を含めているのは、
 *   Contact Form 7 側の「.wpcf7 form .wpcf7-response-output」より
 *   優先度を高くして、左右中央に配置するためです。
 */
.wpcf7 form.wpcf7-form .wpcf7-response-output {
	max-width: 60rem;
	margin-left: auto;
	margin-right: auto;
	padding: 1em 1.5em;
	border-radius: 0.3em;
	font-size: 1.5rem;
	line-height: 1.8;
	text-align: center;
}

/* 読み込み中のくるくる（CF7標準）を中央に */
.wpcf7 .wpcf7-spinner {
	display: block;
	margin: 1.5em auto 0;
}

/* 迷惑メール対策（ハニーポット）用の隠し入力欄
 *
 * 人間には見えない場所に置き、ここに文字が入っていたら
 * 自動プログラムの送信とみなします（判定は inc/cf7.php）。
 *
 * ★ display:none は一部の自動プログラムに見破られるため使いません。
 *   画面の外へ追いやる方法にしています。
 * ★ 音声読み上げの利用者にも読まれないよう、
 *   HTML側で aria-hidden="true" と tabindex="-1" を付けています。
 */
.livefind-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}


/* ==================================================================
 * 6. Instagram Feed（インスタグラム）
 * ------------------------------------------------------------------
 * プラグインが出力する一覧を、静的サイトと同じ
 * 「パソコン：6枚を横一列 ／ スマホ：3枚×2段」に揃えます。
 *
 * 表示件数・列数はプラグイン側の設定
 * （Instagram Feed > 設定）でも変更できます。
 * ================================================================== */
.topInsta__block #sb_instagram {
	width: 100% !important;
	padding: 0 !important;
}

.topInsta__block #sb_instagram #sbi_images {
	display: flex;
	justify-content: space-between;
	gap: 1.2em;
	padding: 0 !important;
}

.topInsta__block #sb_instagram #sbi_images .sbi_item {
	width: auto !important;
	flex: 1;
	padding: 0 !important;
}

.topInsta__block #sb_instagram .sbi_photo {
	display: block;
}

/* プラグイン側のヘッダー・フォローボタンは非表示
   （このデザインには専用の「Instagramへ」ボタンがあるため）*/
.topInsta__block #sb_instagram .sb_instagram_header,
.topInsta__block #sb_instagram #sbi_load {
	display: none !important;
}

@media screen and (max-width: 767px) {
	.topInsta__block #sb_instagram #sbi_images {
		flex-wrap: wrap;
		gap: 0.8em 0;
		justify-content: space-between;
	}

	.topInsta__block #sb_instagram #sbi_images .sbi_item {
		flex: 0 0 31%;
	}
}


/* ==================================================================
 * 7. 管理者向けの注意書き
 * ------------------------------------------------------------------
 * 「フォームが見つかりません」などのメッセージ。
 * 管理者としてログインしているときだけ表示されます。
 * ================================================================== */
.livefind-admin-notice {
	margin: 2em auto;
	padding: 1.5em;
	max-width: 60rem;
	border: 2px dashed #d63638;
	border-radius: 0.4em;
	background: #fff;
	color: #d63638;
	font-size: 1.5rem;
	line-height: 1.8;
	text-align: center;
}