@charset "UTF-8";
/* ==================================================
   富元工業 WP：既存デザインの微調整
   元の reset/style/top 等は触らず、このファイルで後勝ち上書きする。
================================================== */

/* --------------------------------------------------
   ヘッダー：全幅で常にハンバーガー（ukit ドロワー）。
   横並びナビ（.header-nav）は使わず、ハンバーガーの複製元として
   DOM に残したまま常に非表示にする。お問い合わせだけ右上に常時表示。
-------------------------------------------------- */
.header-nav { display: none; }                 /* 横並びナビは常に隠す（複製元） */
.um-l-wrap .um-l-toggle { display: block; }    /* ハンバーガーを常に表示 */

/* お問い合わせ：ハンバーガー(右上固定 50px)の左隣に常時固定表示 */
.header-contact-btn {
	position: fixed;
	right: 62px;               /* 50px ハンバーガー + 余白 の左隣 */
	z-index: 4999;             /* ドロワー(.um-l-wrap z5000)より背面 → 開いたら隠れる */
	display: flex;
	align-items: center;
	height: 50px;
	padding: 0 18px;
	color: #fff;
	font-size: 14px;
	line-height: 1;
	background: #0a0764;
	border-radius: 2px;
	text-decoration: none;
	transition: background-color .3s ease;   /* スクロール時の半透明化だけ滑らかに */
}
/* ホバーしても見た目を変えない（グローバル a:hover で文字が背景色と同化して消える対策） */
.header-contact-btn:hover,
.header-contact-btn:focus {
	color: #fff;
	opacity: 1;
	text-decoration: none;
}
/* ビジュアルを過ぎてスクロールしたら青を薄く（半透明）にする */
.header-contact-btn.is-past-visual {
	background: rgba(10, 7, 100, .65);
}

/* お問い合わせ＋ハンバーガーの縦位置：ロゴに合わせて少し下げる。
   ログイン時は管理バー分（PC 32px / モバイル 46px）だけさらに下げる。 */
.header-contact-btn,
.um-l-wrap .um-l-toggle { top: 28px; }
.admin-bar .header-contact-btn,
.admin-bar .um-l-wrap .um-l-toggle { top: 60px; }

@media screen and (max-width: 782px) {
	.admin-bar .header-contact-btn,
	.admin-bar .um-l-wrap .um-l-toggle { top: 74px; }
}

/* お問い合わせの出し分け：
   PC はハンバーガー内では隠し、右上ボタンを使う。
   モバイルはボタンを消し、ハンバーガー内に表示する。 */
.um-mianList .menu-item-contact { display: none; }

@media screen and (max-width: 768px) {
	.header-contact-btn { display: none; }              /* モバイルはボタンを出さない */
	.um-mianList .menu-item-contact { display: block; } /* ハンバーガー内に表示 */
}

/* --------------------------------------------------
   ロゴ下の説明文：
   最大幅（ナビ横並び時）は 1 行で「｜」区切り。
     水処理施設の工事や設備工事｜「有限会社富元工業」千葉県市原市
   それ未満（ハンバーガー時）は「｜」を消して 2 行に折り返す。
     水処理施設の工事や設備工事
     「有限会社富元工業」千葉県市原市
   ※各 span は nowrap で語句の途中では折らない。
-------------------------------------------------- */
.header-description span { display: inline-block; white-space: nowrap; }
.header-description span:first-child::after { content: "｜"; }

@media screen and (max-width: 1179px) {
	.header-description span { display: block; }
	.header-description span:first-child::after { content: ""; }
}

/* --------------------------------------------------
   フッター：右ブロックの右寄せ(flex-end)で
   ナビの行頭がガタつくのを解消して整列させる。
-------------------------------------------------- */
@media screen and (min-width: 769px) {
	.l-footer-right { align-items: stretch; }          /* 右寄せ解除 → 各行を 600px 幅で扱う */
	.l-footer-right .footer-nav ul { justify-content: flex-start; } /* ナビは左揃いで整列 */
	.l-footer-right .footer-links { justify-content: flex-end; }    /* ボタンは右寄せを維持 */
	.l-footer-right .footer-copyright { display: block; text-align: right; } /* コピーライトは右 */
}

/* --------------------------------------------------
   ハンバーガーボタンの背景を透過に（三本線のみ表示）
-------------------------------------------------- */
.um-l-wrap .um-l-toggle .um-crossBtn-basis { background: transparent; }

/* --------------------------------------------------
   モバイル フッター：文字サイズを固定 px に戻す。
   元デザインは html font-size:4vw を基準に rem / inherit で組まれており、
   本文（px 固定）に対しフッターだけ画面幅に比例して肥大化していた。
   フッターだけ固定 px に上書きして読みやすさを揃える。
-------------------------------------------------- */
@media screen and (max-width: 768px) {
	.l-global-footer { font-size: 14px; }   /* 住所・営業時間など基準 */
	.footer-logo { font-size: 13px; }
	.footer-tel { font-size: 24px; }
	.footer-nav a { font-size: 14px; }
	.footer-copyright { font-size: 12px; }

	/* 住所・営業時間・TEL：開始位置をそろえてブロックごと中央寄せ */
	.footer-contact {
		width: fit-content;
		max-width: 100%;
		margin: 0 auto;
	}
	.footer-about {
		display: grid;
		grid-template-columns: max-content max-content;
		column-gap: .6em;
		row-gap: .2em;
		justify-content: start;
	}
	.footer-about dt,
	.footer-about dd { width: auto; margin: 0; }
	.footer-tel { display: block; text-align: left; margin-top: 1em; }
}

/* --------------------------------------------------
   施工事例・スタッフ一覧：写真を切らず全体表示＋カード調整
   （元は item-thumb を固定比率で cover トリミングしており、
     縦長のスタッフ写真は頭が見切れていた）
-------------------------------------------------- */
.staff-items-wrap .item-thumb {
	padding-top: 0;
	height: 250px;
	background: #f4f4f4;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 1px solid #ececec;
	box-sizing: border-box;
}
.staff-items-wrap .item-thumb img {
	position: static;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
@media screen and (max-width: 768px) {
	/* モバイルでも2列で並べる */
	.staff-items-wrap { justify-content: space-between; }
	.staff-items-wrap .item:nth-child(n) { width: 48%; margin: 0 0 1.2rem; }
	.staff-items-wrap .item-thumb { height: 40vw; }
	.staff-items-wrap .item-btn { max-width: 100%; }
}

/* --------------------------------------------------
   トップページ：新着情報（挨拶とサービスの間・画像なし）
   サイトの雰囲気（紺 #0a0764 / Noto Serif）に合わせたシンプルなNEWS体裁
-------------------------------------------------- */
.l-top-info-area {
	padding: 24px 20px;
}
.l-top-info-area .l-area-inner {
	max-width: 1000px;
	margin: 0 auto;
}
.top-info-section .info-head {
	text-align: center;
	margin: 0 0 28px;
	line-height: 1.2;
}
.top-info-section .info-head .ja {
	display: block;
	color: #0a0764;
	font-size: 26px;
	font-weight: 600;
}
.top-info-section .info-head .en {
	display: block;
	margin-top: 4px;
	color: #b0b0b0;
	font-size: 13px;
	letter-spacing: .15em;
	text-transform: uppercase;
}
.top-info-section .info-list {
	border-top: 1px solid #e3e3e3;
	margin: 0 0 28px;
}
.top-info-section .info-list li {
	border-bottom: 1px solid #e3e3e3;
}
.top-info-section .info-list a {
	display: flex;
	align-items: center;
	gap: 1.8em;
	padding: 18px 8px;
	color: #333;
	text-decoration: none;
	transition: background-color .2s ease;
}
.top-info-section .info-list a:hover {
	background: #f6f6f8;
}
.top-info-section .info-date {
	flex-shrink: 0;
	color: #0a0764;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .04em;
}
.top-info-section .info-ttl {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.top-info-section .info-more {
	text-align: center;
}
.top-info-section .info-more a {
	display: inline-block;
	min-width: 220px;
	padding: 13px 28px;
	color: #fff;
	font-size: 14px;
	text-align: center;
	background: #0a0764;
	text-decoration: none;
	transition: opacity .2s ease;
}
.top-info-section .info-more a:hover {
	opacity: .8;
}
@media screen and (max-width: 768px) {
	.l-top-info-area { padding: 40px 16px 20px; }   /* 上の余白を少し大きく */
	.top-info-section .info-list a {
		flex-direction: column;
		align-items: flex-start;
		gap: .35em;
		padding: 14px 4px;
	}
	/* 記事タイトルはリストらしく一段小さく（見出し26pxと競わせない） */
	.top-info-section .info-ttl { white-space: normal; font-size: 16px; line-height: 1.6; }
	/* 「新着情報一覧へ」ボタンは文字幅＋αに（全幅をやめる） */
	.top-info-section .info-more a { width: auto; min-width: 0; padding: 12px 24px; }
}

/* --------------------------------------------------
   新着情報 記事本文を読みやすく
   （行間・段落間隔・文字サイズを整える）
-------------------------------------------------- */
.page-news .l-narrow-section-area .section-content {
	font-size: 16px;
	line-height: 2;
	color: #333;
}
.page-news .section-content p {
	margin: 0 0 1.6em;
}
.page-news .section-content p:last-child {
	margin-bottom: 0;
}
.page-news .styled-title01 {
	line-height: 1.5;
	margin-bottom: 14px;
}
.page-news .post-info-wrap {
	margin-bottom: 24px;
}

/* --------------------------------------------------
   トップ 施工事例（黒ラベル）：画像を左・タイトルを右に。
   日付は HTML から除去済み。画像とタイトルの間隔だけ確保する。
-------------------------------------------------- */
.top-news-section .top_news { gap: 20px; }

/* 見出しを画像(news_title.png)からテキスト(紺)に置き換えたので、
   PC 用に見出しスタイルを付与。Case は廃止。 */
@media screen and (min-width: 769px) {
	.top-news-section .news-title .ja {
		display: block;
		color: #0a0764;
		font-size: 52px;
		font-weight: 600;
		line-height: 1.2;
		text-align: center;   /* タイトルはページ幅の中央に */
	}
	/* 左オフセットを「枠(news-content)だけ」に適用する。
	   これで枠は今の右寄せ位置を保ちつつ、見出しはページ中央基準のまま
	   → 「施工事例」の文字だけがページ幅の中央に来る。 */
	.l-top-news-area .l-area-inner { padding: 84px 0 4px; }
	.top-news-section .news-content { padding-left: 460px; }
}

/* --------------------------------------------------
   事業ページの画像ギャラリー（js-changeimages を廃止し素朴なグリッドに）。
   lightbox なし・大画像の重複なし。見出し／説明の下に配置。
-------------------------------------------------- */
.page-gallery {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);   /* 基本は3列（＝3枚グリッドの大きさ） */
	gap: 16px;
}
.page-gallery li { margin: 0; }
.page-gallery img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* 1枚だけ（水処理）：3列セル1つ分の大きさで中央寄せ・トリミングなし */
.page-gallery.is-single {
	display: block;
	max-width: 349px;
	margin: 0 auto;
}
.page-gallery.is-single img {
	aspect-ratio: auto;
	object-fit: contain;
}

/* 2枚（設備工事）：15% 画像 画像 15% で中央寄せ（3列相当の大きさ） */
.page-gallery.is-pair {
	display: flex;
	justify-content: center;
	gap: 16px;
}
.page-gallery.is-pair li { width: 34%; }

/* 2×2（海外事業）：4枚を2列で中央寄せ（3列相当の大きさ） */
.page-gallery.is-2x2 {
	grid-template-columns: repeat(2, 349px);
	justify-content: center;
}

/* 携帯：どのギャラリーも2枚ずつ横並び */
@media screen and (max-width: 768px) {
	.page-gallery,
	.page-gallery.is-2x2 {
		grid-template-columns: repeat(2, 1fr);
		justify-content: normal;
		gap: 10px;
	}
	.page-gallery.is-pair { gap: 10px; }
	.page-gallery.is-pair li { width: 48%; }
}

/* --------------------------------------------------
   画面を縮めた時に文字が急拡大（爆デカ化）するのを防ぐ。
   モバイルは元デザインが html:4vw を基準に rem 設計されており、
   幅の広い端末（〜768px）でルートが最大約30pxまで肥大化して
   文字が異常に大きくなる。上限(18px)を設けて全ページ一括で抑える。
   ※実機スマホ（〜450px程度）は 4vw のままなので見た目は従来どおり。
-------------------------------------------------- */
@media screen and (max-width: 768px) {
	html { font-size: min(4vw, 18px); }
}

/* ==================================================
   TOP モバイル専用の見た目調整
   （セクションタイトルは 新着情報/NEWS 書式に統一：
     ja=紺26px太字 / en=灰13px大文字・中央寄せ）
================================================== */
@media screen and (max-width: 768px) {

	/* ご挨拶：白カード＋文字の階層でデザイン性を持たせる（ベタ打ち解消） */
	.l-top-greeting-area { padding: 1.6rem .9rem 2rem; }
	.l-top-greeting-area .l-area-inner {
		background: rgba(255, 255, 255, .93);
		border-radius: 12px;
		padding: 1.8rem 1.3rem 2rem;
		box-shadow: 0 8px 24px rgba(10, 7, 100, .12);
	}

	/* セクションタイトル（挨拶／Greeting）= NEWS書式 */
	.top-greeting-section .greeting-head {
		text-align: center;
		line-height: 1.2;
		margin: 0 0 1.4rem;
	}
	.top-greeting-section .greeting-head .ja {
		display: block;
		color: #0a0764;
		font-size: 26px;
		font-weight: 600;
	}
	.top-greeting-section .greeting-head .en {
		display: block;
		margin-top: 4px;
		color: #b0b0b0;
		font-size: 13px;
		letter-spacing: .15em;
		text-transform: uppercase;
	}

	/* リード文（キャッチ）：主役として紺・中央・ゆったり */
	.top-greeting-section .greeting-title {
		background: none;
		padding: 0;
		margin: 0 0 1.5rem;
		text-align: center;
		color: #0a0764;
		font-size: 1.25rem;
		font-weight: 600;
		line-height: 1.9;
		letter-spacing: .02em;
	}

	/* 本文：行間・段落間隔をゆったりにして読みやすく */
	.top-greeting-section .greeting-content {
		padding: 0;
		font-size: .95rem;
		line-height: 2.05;
		color: #3a3a3a;
		text-align: left;
	}
	.top-greeting-section .greeting-content p:not(:last-child) {
		margin-bottom: 1.5em;
	}

	/* サービス見出しを NEWS 書式に統一 */
	.top-service-section .service-title { text-align: center; line-height: 1.2; }
	.top-service-section .service-title .ja {
		display: block;
		margin: 0;
		color: #0a0764;
		font-size: 26px;
		font-weight: 600;
		text-shadow: none;
	}
	.top-service-section .service-title .en {
		display: block;
		margin-top: 4px;
		color: #b0b0b0;
		font-size: 13px;
		letter-spacing: .15em;
		text-transform: uppercase;
		text-shadow: none;
	}

	/* サービス：カード化して見やすく（画像＝上に、タイトル＋ボタンを下に中央） */
	.top-service-section .service-items-wrap .item {
		display: block;
		margin: 0 0 1.4rem;
		background: #fff;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 3px 14px rgba(10, 7, 100, .1);
	}
	.top-service-section .service-items-wrap .item-thumb { width: 100%; }
	.top-service-section .service-items-wrap .item-thumb .trim { padding-top: 45%; }
	.top-service-section .service-items-wrap .item-texts {
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 1rem 1rem 1.2rem;
		text-align: center;
	}
	.top-service-section .service-items-wrap .item-title { margin: 0 0 .9rem; }
	.top-service-section .service-items-wrap .item-title .ja {
		display: block;
		margin: 0;
		color: #0a0764;
		font-size: 1.35rem;
		font-weight: 600;
		line-height: 1.3;
	}
	.top-service-section .service-items-wrap .item-title .en {
		display: block;
		margin-top: 3px;
		color: #b0b0b0;
		font-size: .75rem;
		letter-spacing: .12em;
		text-transform: uppercase;
	}
	.top-service-section .service-items-wrap .item-btn {
		display: inline-block;
		width: auto;
		min-width: 60%;
		line-height: 2.6;
		padding: 0 1.6em;
		border-radius: 5px;
		font-size: 1rem;
	}

	/* 施工事例：見出しに Case、黒ラベルは画像左・文字右（PC同様） */
	.top-news-section .news-title { text-align: center; }
	.top-news-section .news-title .ja {
		display: block;
		color: #0a0764;
		font-size: 26px;
		font-weight: 600;
		line-height: 1.2;
	}
	.top-news-section .news-title .en {
		display: block;
		margin-top: 4px;
		color: #b0b0b0;
		font-size: 13px;
		letter-spacing: .15em;
		text-transform: uppercase;
	}
	.top-news-section .top_news {
		flex-flow: row;
		align-items: center;
		gap: 16px;
	}
	.top-news-section .top_news img { width: 120px; flex-shrink: 0; }
	.top-news-section .top_news .item-content { margin: 0; }
}

/* ==================================================
   スタッフ紹介（PC・モバイル共通）
================================================== */
/* 一覧：画像＋名前をリンク化（趣味・ボタンは廃止）。名前は画像に対して中央。 */
.staff-items-wrap .item-link { display: block; text-decoration: none; color: inherit; }
.staff-items-wrap .item-link:hover { text-decoration: none; opacity: .85; }
.staff-items-wrap .item-title { text-align: center; margin-bottom: 0; font-size: 20px; }
/* 上下（行間）の余白を詰める（95px → 40px） */
.staff-items-wrap .item { margin-bottom: 40px; }

/* 詳細：人物写真=左 / 名前・説明=右（拡大ギャラリーは廃止済み） */
.staff-detail-section { width: 100%; }
.staff-detail {
	display: flex;
	gap: 56px;
	align-items: center;          /* テキストを写真の高さ中央に */
	justify-content: center;      /* 写真＋テキストのグループを中央寄せ */
}
.staff-detail-photo {
	width: 32%;
	max-width: 340px;            /* 画像を一回り小さく */
	flex-shrink: 0;
}
.staff-detail-photo img { width: 100%; display: block; }
.staff-detail-text { flex: 0 1 auto; }   /* 余白を埋めず内容幅に */
.staff-detail-text .section-title {
	font-size: 30px;             /* 名前を大きく */
	margin-bottom: 16px;
}
.staff-detail-text .section-body { font-size: 18px; line-height: 1.9; }

@media screen and (max-width: 768px) {
	.staff-detail { flex-direction: column; gap: 18px; align-items: center; }
	.staff-detail-photo { width: 100%; max-width: 280px; margin: 0 auto; }
	.staff-detail-text { text-align: center; }
	.staff-detail-text .section-title { font-size: 24px; }
}

/* ==================================================
   ページネーション（全アーカイブ共通）
   SWELL 親テーマの .page-numbers 自身の装飾（背景・枠・影・余白）が
   富元の .pagenation li の箱に重なり、二重箱／ズレて見えていた。
   内側 .page-numbers の装飾を打ち消し、li の箱だけで表示する。
================================================== */
.pagenation li { width: 34px; line-height: 34px; }
.pagenation li > .page-numbers {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: 100%;
	height: auto;
	line-height: inherit;
	font-size: 14px;
	color: #fff !important;
	display: block;
}