@charset "utf-8";
/* =========================================================
   dipross 共通フッター下部（footbtm）スタイル
   staff.dipross.jp の haken/recruit フッターから抽出・自己完結化

   ▼ 既存サイトCSSとの競合対策
   すべてのクラスに「dpf-」プレフィックスを付け、全セレクタを
   ルートの .dpf-footer 配下にスコープしています。
   汎用名（.pc / .sp / .copy / .link / .hover / .clearfix）や
   素の img への指定は一切使っていないため、ページ側のCSSとは衝突しません。

   ▼ スマホ表示について
   dipross 実サイトは <meta name="viewport" content="width=1300"> で
   横1300px固定とし、スマホでは「PCレイアウトを縮小表示」しています。
   そのため専用のSPレスポンシブCSSは持たず、PCレイアウトのみです。
   貼り付け先ページでも同じ viewport 指定にすると実サイトと同じ見え方になります。
   依存ファイル: footer.css と img/ だけで動作します
   ========================================================= */

/* --- スコープ付きリセット（元サイトのグローバルリセット相当） --- */
.dpf-footer,
.dpf-footer * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.dpf-footer img {
	border: none;
	vertical-align: top;
	height: auto;
	max-width: 100%;
}
.dpf-footer p,
.dpf-footer dt,
.dpf-footer dd,
.dpf-footer li,
.dpf-footer th,
.dpf-footer td {
	line-height: 1.5;
}

/* --- リンク・ホバー共通 --- */
.dpf-footer a {
	color: inherit;
	text-decoration: none;
	transition: all 0.2s;
}
.dpf-footer .dpf-hover {
	display: block;
	cursor: pointer;
	transition: all 0.2s;
}
.dpf-footer .dpf-hover:hover { opacity: 0.7; }
.dpf-footer .dpf-link { cursor: pointer; text-decoration: none; }
.dpf-footer .dpf-link:hover { text-decoration: underline; opacity: 1; }

/* --- 表示切替（PC/SP）。PCでは .dpf-sp を隠す --- */
.dpf-footer .dpf-sp { display: none !important; }

/* --- clearfix --- */
.dpf-footer .dpf-inner:after {
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	min-height: 0px;
}

/* =======================  PC（レイアウトのみ）  ======================= */
.dpf-footer .dpf-footbtm {
	/* 元サイトでは margin-top:-40px; padding-top:70px;（上のfootmidと重ねる指定）
	   単体利用では不要なため 30px の均等パディングに調整しています */
	margin-top: 0;
	padding: 30px 60px;
	background-color: #FAFAFA;
	font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Lucida Grande", sans-serif;
	color: #000;
	line-height: 1.5;
}
.dpf-footer .dpf-left {
	float: left;
	font-size: 12px;
}
.dpf-footer .dpf-pm {
	display: block;
	float: left;
	margin: 0px 20px;
}
/* プライバシーマーク画像は全デバイスで 70px 固定（max-width:100% で縮まないよう明示）
   ※ #footer 配下のID指定ルール（旧フッター用 #footer img など）に詳細度で負けないよう
     #footer 接頭辞付きセレクタも併記しています */
.dpf-footer .dpf-pm img,
#footer .dpf-footer .dpf-pm img {
	width: 70px;
	max-width: 70px;
	height: auto;
}
.dpf-footer .dpf-right {
	float: right;
	padding-top: 1px;
	font-size: 0;
	color: #919191;
}
.dpf-footer .dpf-links {
	display: inline-block;
	vertical-align: middle;
	margin-right: 40px;
}
.dpf-footer .dpf-link-item {
	display: inline-block;
	margin-right: 30px;
	font-size: 12px;
}
.dpf-footer .dpf-link-item:last-child { margin-right: 0; }
.dpf-footer .dpf-sns {
	display: inline-block;
	vertical-align: middle;
}
.dpf-footer .dpf-sns-item {
	display: inline-block;
	margin-right: 10px;
}
.dpf-footer .dpf-sns-item:last-child { margin-right: 0; }

/* =======================  SP（〜768px）  =======================
   ・dpf-footbtm.dpf-inner の直下子要素（dpf-left / dpf-pm / dpf-right）
     を縦並び・中央寄せ・gap付きに
   ・孫要素は元のinline-block横並びのまま、中央寄せに
   ============================================================ */
@media (max-width: 768px) {
	/* PC/SP切替: SPでは .dpf-pc を隠し、.dpf-sp を表示 */
	.dpf-footer .dpf-pc { display: none !important; }
	.dpf-footer .dpf-sp { display: inline-block !important; }

	.dpf-footer .dpf-footbtm {
		padding: 30px 4%;
	}

	/* 子要素を縦並び・中央寄せ・gap */
	.dpf-footer .dpf-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}

	/* PCのfloat/marginを解除し、各ブロック内を中央寄せに */
	.dpf-footer .dpf-left,
	.dpf-footer .dpf-pm,
	.dpf-footer .dpf-right {
		float: none;
		margin: 0;
		padding-top: 0;
		text-align: center;
	}

	/* dpf-right は PC で font-size:0（孫inline-blockの隙間殺し）のため、
	   SP でも継続。ただし孫の dpf-copy(small) が継承で0pxにならないよう個別指定 */
	.dpf-footer .dpf-copy {
		font-size: 10px;
		color: #919191;
	}

	/* dpf-right 内の孫要素（dpf-links / dpf-sns / dpf-copy.dpf-sp）も縦並び・中央寄せ */
	.dpf-footer .dpf-right {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}
	/* dpf-links は flex 横並び＋折り返し、子はマージン0で gap で間隔をとる */
	.dpf-footer .dpf-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px 20px;   /* 行間12px / 列間20px */
		margin-right: 0;
	}
	.dpf-footer .dpf-link-item {
		margin: 0;
	}
	/* dpf-sns 内の曾孫アイコンは元のinline-block横並びのまま中央寄せ */
	.dpf-footer .dpf-sns {
		text-align: center;
	}
	/* SP の SNS アイコンは 30px 幅に
	   ※ #footer 接頭辞付きを併記して、ID指定のページ側ルールに詳細度で負けないように */
	.dpf-footer .dpf-sns-item img,
	#footer .dpf-footer .dpf-sns-item img {
		width: 30px;
		height: auto;
	}
}