.sp {
	display: none;
}
.pc {
	display: block;
}

footer {
	width:100%;
	padding-bottom: 0;

	z-index: 9000;
}
#wrapper {
	width:100%;
	min-width: auto;
}

.lang-image{
	height: 45px!important;
}

:root{
	/* コンテナとカードの調整変数 */
	--footer-maxw: 1200px;
	--footer-pad-x: 24px;
	--footer-pad-y: 32px;
	--footer-border: #c4c4c4;
	--footer-fg: #151515;
	--footer-muted: #6b7280;

	/* 位置合わせはここで調整できます */
	--cta-inset-x: 48px;   /* 左右の余白 */
	--cta-inset-top: 100px;/* 上からの位置 */
	--cta-arrow-right: 48px;

	--cta-gap: 28px;
	--cta-radius: 18px;
	--cta-h: clamp(180px, 28vw, 260px); /* 2カードの高さを固定にして揃える */
	--cta-content-w: clamp(320px, 42vw, 520px); /* 横幅（例：Figmaの約490px相当） */
	--cta-content-h: 142px;                     /* 高さ（Figmaの142px） */

	--support-col-w: 380px;     /* 左カラムの幅 */
	--section-col-gap: 80px;    /* 左右カラムの間隔 */
	--links-col-gap: 56px;      /* ナビ列のカラム間隔 */
	--links-row-gap: 12px;      /* ナビの行間 */
}

/* ====== 2カード（Contact/Recruit）：同サイズで均等配置 ====== */
.footer-cta{
	position: relative;

	/*max-width: var(--footer-maxw);*/
	margin: 24px auto 16px;
	padding: 0 var(--footer-pad-x);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* ← 等幅2列 */
	gap: 15px;
}
.cta-card{
	position: relative;
	display: block;
	height: var(--cta-h);								 /* ← 高さを共通化 */
	/*border-radius: var(--cta-radius);*/
	border-radius: 8px;;
	overflow: hidden;
	color: #ffffff;												/* テキストは黒 */
	text-decoration: none;
	background-size: cover;
	background-position: center;
	isolation: isolate;

	width: 100%;
}
.cta-card,
.cta-card:link,
.cta-card:visited,
.cta-card:hover,
.cta-card:active{
	color:#fff;
	text-decoration:none;
}
.cta-card{ -webkit-tap-highlight-color: transparent; user-select: none; }

.cta-card.contact{ background-image: url("/common/asset/footer_contact.png"); }
.cta-card.recruit{ background-image: url("/common/asset/footer_recruit.png"); }

/* うっすらの白〜黒グラデで文字を読みやすく */
.cta-card::before{
	content:"";
	position:absolute; inset:0;
	/*background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.16) 45%, rgba(0,0,0,.25) 100%);*/

	/* 以前より少し暗めにして白文字を読みやすく */
	/*background: linear-gradient(
		180deg,
		rgba(0,0,0,.12) 0%,
		rgba(0,0,0,.38) 55%,
		rgba(0,0,0,.55) 100%
	);*/

	z-index:0;
}
.cta-content{
	/*
	position:absolute;
	left:20px;
	right:80px;
	bottom:18px;
	z-index:1;
	*/

	position:absolute;
	left:50%; top:50%;
	transform: translate(-50%, -50%); /* ← 中央寄せ */
	width: var(--cta-content-w);
	height: var(--cta-content-h);

	/* 3分割グリッドで“上・中・下”に貼り付ける */
	display:grid;
	grid-template-rows: 1fr auto 1fr; /* 上：余白, 中：実寸, 下：余白 */
	/* 余白を均等にしたい場合は  auto 1fr auto でもOK */
	align-items: stretch;
	justify-items: start;
	z-index:1;

}
/* === テキストブロックの位置 === */
.cta-content{
	z-index: 1;
}

.cta-content h3{
	margin:0 0 16px; font-size: clamp(20px, 3.2vw, 28px); font-weight: 800; letter-spacing:.01em;
}
.cta-content p{ margin:0; font-size:14px; opacity:.9; }

/* 見出し/本文の可読性補助 */
.cta-content h3,
.cta-content p{
	color:#fff;
}

/* 余計なマージンをリセット（正確に“端”に合わせるため） */
.cta-title{ margin:0; }
.cta-eyebrow{ margin:0; }
.cta-desc{ margin:0; }
/* 上弦・中央・下弦の貼り付け */
.cta-title{ align-self: start; }   /* 上端 */
.cta-eyebrow{ align-self: center; }/* ど真ん中 */
.cta-desc{ align-self: end; }      /* 下端 */

.cta-content .cta-title {
	font-family: Satoshi;
	font-weight: 400;
	font-style: Regular;
	font-size: 56px;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 0%;
	text-transform: capitalize;

	color:#fff; 
}
.cta-content .cta-eyebrow {
	font-family: Noto Sans JP;
	font-weight: 400;
	font-style: Regular;
	font-size: 14px;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 0%;

	color:#fff; 
}
.cta-content .cta-desc {
	font-family: Noto Sans JP;
	font-weight: 400;
	font-style: Regular;
	font-size: 16px;
	leading-trim: NONE;
	line-height: 140%;
	letter-spacing: 0%;

	color:#fff; 
}


/* コンテナ（中段全体の包み） */
.footer-container{
	max-width: 90%;
	margin: 0 auto;
	padding: var(--footer-pad-y) var(--footer-pad-x);
	padding-bottom: 0px;
}


/* ▼ フッター中段：左=相談窓口 / 右=フッターナビ を2カラムで並べる */
.footer-section{
	display: grid;                                   /* ← これが抜けている */
	grid-template-columns: var(--support-col-w) 1fr; /* 左固定幅 / 右自動 */
	column-gap: var(--section-col-gap);              /* カラム間隔 */
	align-items: start;
}

/* Gridの子要素が縮められるように（長文でのはみ出し防止） */
.footer-section > .support,
.footer-section > .footer-links-wrap{
	min-width: 0;
}

/* ロゴは237×74固定で左寄せ */
.footer-logo-row{ margin-bottom: 30px; }
/* 1) KOGANEIロゴは 237x74 で固定 */
.footer-logo-img{
	width:237px;
	height:74px;
	object-fit:contain;
	display:block;
}

/* 罫線 */
.footer-divider{
	border: none;
	border-top: 1px solid var(--footer-border);
	margin: 16px 0 24px;
}

.support{ 
	display: grid;
	row-gap: 0px;
	min-width: 400px;
}


.cta-content cta-title,
.cta-content cta-eyebrow,
.cta-content cta-desc {
	color:#fff;
}


/* 右：フッターナビ（4カラムのグリッド） */
.footer-links-wrap{
	display: block;
	justify-self: end;       /* グリッドセル内で右寄せ */
	width: max-content;      /* 中身の幅に縮む（=右端に寄りやすい） */
	overflow:hidden;/* 行数が増えても崩れにくく */
	right:0;
	max-width: 620px;
}
.footer-links{
	width: 513px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 30px;
	list-style:none; margin:0; padding:0;
	row-gap: 25px;
}
.footer-links a{
	color:#151515;
	text-decoration:none;
	display:inline-block;
	padding:2px 0;

	font-family: Noto Sans JP;
	font-weight: 400;
	font-style: Regular;
	font-size: 16px;
	leading-trim: NONE;
	line-height: 100%;
	letter-spacing: 0%;

	display: flex;
	justify-content: center;
	gap: 5px;
}
.footer-links a:hover{ text-decoration: underline; }


/* 3) GMOバッジのサイズ感（お好みで微調整） */
.footer-badges{
	display:flex;
	align-items:center;
	gap:12px;
	margin-top:6px;	 /* 必要なら間隔 */
}

.footer-badges .badge-gmo{
	width:auto;
	display:block;

	width: 145px;
	height: 76px;
	angle: 0 deg;
	opacity: 1;
}

/* 右下：矢印ボタン（白い丸＋SVG） */
.cta-arrow{
	position:absolute;
	right:0;
	bottom:0;
	z-index:1;
	
	width:64px;
	height:64px;
}
.cta-arrow::before{
	content:""; position:absolute; inset:0; border-radius:inherit;
	border: none;
}
.cta-arrow::after{
	content:"";
	position:absolute;
	width:64px;
	height:64px;
	background: url("/common/asset/arrow_white.svg") no-repeat center / contain; /* ← 指定SVGを使用 */
}
.cta-card:hover::before{
	/*background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.12) 45%, rgba(0,0,0,.20) 100%);*/
}
.cta-card:focus-visible{ 
	/*
	outline: 3px solid #60a5fa;
	outline-offset: 2px; 
	*/
}

/* ====== 中段エリア ====== */
.site-footer{
	/*border-top: 1px solid var(--footer-border);*/
	color: var(--footer-fg);

	background: #fff;
	position: relative;
}
.footer-inner{
	max-width: var(--footer-maxw);
	margin: 0 auto;
	padding: var(--footer-pad-y) var(--footer-pad-x);
	display: grid;
	grid-template-columns: minmax(280px, 1fr) 2fr; /* 左：ブランド 右：リンク */
	gap: 32px;
}

/* 左：ロゴ 237x74固定 */
.footer-logo-img{
	width: 237px; height: 74px; object-fit: contain; display:block;
}
.footer-brand{ 
	display:flex;
	flex-direction:column;
	gap: 10px;

	font-family: Noto Sans JP;
	font-weight: 400;
	font-style: Regular;
	font-size: 16px;
	leading-trim: NONE;
	line-height: 140%;
	letter-spacing: 0%;

}
.contact-label{
	color: #000000;
	text-decoration: none; 

	font-family: Noto Sans JP;
	font-weight: 400;
	font-style: Regular;
	font-size: 16px;
	leading-trim: NONE;
	line-height: 140%;
	letter-spacing: 0%;

	padding: 0;
	border: none;
	gap: 0;
	margin: 0;
}

.footer-brand {
	padding: 0;
	border: none;

	padding: 0;
	border: none;
	gap: 0;
	margin: 0;
}
.footer-brand .tel {
	padding: 0;
	border: none;
	gap: 0;
	margin: 0;
}
.tel {
	padding: 0;
	border: none;
	gap: 0;
	margin: 0;

	color: #000000;
	text-decoration: none; 

	font-family: Noto Sans JP;
	font-weight: 400;
	font-style: Regular;
	font-size: 16px;
	leading-trim: NONE;
	line-height: 140%;
	letter-spacing: 0%;
}
.footer-brand .hours {
	padding: 0;
	border: none;
	gap: 0;
	margin: 0;
}
.hours {
	padding: 0;
	border: none;
	gap: 0;
	margin: 0;
}

.tel a{ 
	color: #000000;
	text-decoration: none; 

	font-family: Noto Sans JP;
	font-weight: 400;
	font-style: Regular;
	font-size: 16px;
	leading-trim: NONE;
	line-height: 140%;
	letter-spacing: 0%;
}
.hours{ 
	color: #000000;
	text-decoration: none; 

	font-family: Noto Sans JP;
	font-weight: 400;
	font-style: Regular;
	font-size: 16px;
	leading-trim: NONE;
	line-height: 140%;
	letter-spacing: 0%;
}

/* 右：リンク列 */
.footer-nav{
	display:grid;
	grid-template-columns: repeat(3, minmax(160px, 1fr));
	gap: 24px;
}
.links-col{ list-style:none; margin:0; padding:0; }
.links-col li{ line-height: 1.9; }
.links-col a{ color:#151515; text-decoration:none; }
.links-col a:hover{ text-decoration: underline; }

/* ====== 下段 ====== */
.footer-bottom_sp {
	display: none;
}
.footer-bottom{
	/*max-width: var(--footer-maxw);*/
	width: 100%;

	margin: 8px auto 0;
	padding: 16px var(--footer-pad-x) 24px;
	display:grid;
	grid-template-columns: 1fr auto auto;
	align-items:center;
	gap: 16px;
}
.copyright{ color:#9C9C9C; }
.legal{
	list-style:none;
	display:flex;
	gap:50px;
	margin:0; padding:0;
}
.legal a{
	color:#9C9C9C;
	text-decoration:none;
	font-size: 14px;
}
.legal a:hover{
	text-decoration:underline;
}

/* 言語：画像ボタン→アコーディオン（<details>でJS不要） */
.lang{
	position: relative;
}
.lang > summary{
	list-style: none;
	display:flex; 
	lign-items:center;
	gap:10px;
	cursor: pointer;
	user-select: none;
}
.lang > summary::-webkit-details-marker{
	display:none;
}
.lang > summary img{
	width: 96px;
	height: 28px;
	object-fit: contain;
	display:block; /* language.png をそのまま表示 */
}
.lang .current{ font-size:14px; color:#151515; }

/* 開くリスト */
.lang-list{
	position:absolute; right:0;
	bottom: calc(100% + 8px);
	background: #fff;
	border:1px solid #e5e7eb;
	border-radius: 10px;
	list-style:none;
	margin:0;
	padding:6px;
	min-width: 160px;
}
.lang-list li a{
	font-size:14px;
	display:block;
	padding:8px 10px;
	border-radius:8px;
	color:#151515;
	text-decoration:none;
}
.lang-list li a:hover{
	background:#f3f4f6;
}

.lang-list LI .unlink {
	font-size:14px;
	left: 0;
	background: #fff;
	border: none;
	border-radius: 10px;
	list-style: none;
	margin: 0;
	padding: 6px;
	min-width: 160px;

	color: #c7c7c7;
	font-size: 14px;
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	text-decoration: none;
}



/* 言語：画像ボタン→アコーディオン（<details>でJS不要） */
.lang_sp{
	position: relative;
}
.lang_sp > summary{
	list-style: none;
	display:flex;
	align-items:center;
	gap:10px;
	cursor: pointer;
	user-select: none;
}
.lang_sp > summary::-webkit-details-marker{
	display:none;
}
.lang_sp > summary img{
	width: 64px;
	height: 28px;
	object-fit: contain;
	display:block; /* language.png をそのまま表示 */
}
.lang_sp .current{
	font-size:14px;
	color:#151515;
}

/* 開くリスト */
.lang_sp-list{
	font-size:14px;
	position: absolute;
	left: 0;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	list-style: none;
	margin: 0;
	padding: 6px;
	min-width: 160px;
	top: -260px;
}
.lang_sp-list li a{
	font-size:14px;
	display:block;
	padding:8px 10px;
	border-radius:8px;
	color:#151515;
	text-decoration:none;
}
.lang_sp-list li a:hover{
	background:#f3f4f6;
}

.lang_sp-list LI .unlink {
	font-size:14px;
	left: 0;
	background: #fff;
	border: none;
	border-radius: 10px;
	list-style: none;
	margin: 0;
	padding: 6px;
	min-width: 160px;

	color: #c7c7c7;
	font-size: 14px;
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	text-decoration: none;
}


	.footer-hr{
		margin-top:50px;
	}

	details.sp {
		display: none;
	}
	details.pc {
		display: block;
	}

	.sp_br {
		display: none;
	}


	/* ====== レスポンシブ ====== */
	@media (max-width: 1024px){
		.sp_br {
			display: block;
		}


		details.sp {
			display: block;
		}
		details.pc {
			display: none;
		}

		.footer-cta{
			gap: 16px;
		}

		.footer-cta{ grid-template-columns: 1fr; }
		.footer-inner{ grid-template-columns: 1fr; }
		.footer-nav{ grid-template-columns: repeat(2, minmax(160px,1fr)); }
		.footer-section{
			grid-template-columns: 1fr;           /* 縦積みに */
			row-gap: 24px;
		}
		.footer-links-wrap{
			width:100%;
			max-width:auto;
		}
		.footer-links{
			grid-template-columns: repeat(2, minmax(140px, 1fr));
		}
		.cta-content {
			width: 80%;
			height: 80%;
		}

		.support{ 
			min-width: 100%;
		}




		.footer-section {
			display: block;
		}

		.support {
			margin-bottom: 40px;
		}

		.site-footer {
			margin: 0;
			padding: 40px 24px;
			float: none;
		}

		.footer-cta {
			margin: 0 0 80px;
			padding: 0;
		}

		.cta-card {
			border-radius: 8px;
		}

		.cta-card.contact {
			background-image: url("/common/asset/footer_contact.png");
			padding: 40px 24px;
			height: 239px;
			width: 100%;
			position: relative;
		}

		.cta-card.recruit {
			background-image: url("/common/asset/footer_recruit.png");
			padding: 40px 24px;
			/*height: auto;*/
			height: 204px;
			width: 100%;
			position: relative;
		}

		.cta-content {
			width: auto;
			height: auto;
			position: relative;
			left: 0;
			top: 0;
			transform: none;
			display: block;
		}

		.cta-content .cta-title {
			color: #fff;
			font-family: Satoshi;
			font-weight: 400;
			font-style: Regular;
			font-size: 48px;
			leading-trim: NONE;
			line-height: 100%;
			letter-spacing: 0%;
			text-transform: capitalize;
			margin: 0 0 16px;
		}

		.cta-content .cta-eyebrow {
			color: #fff;
			font-family: Noto Sans JP;
			font-weight: 400;
			font-style: Regular;
			font-size: 14px;
			leading-trim: NONE;
			line-height: 100%;
			letter-spacing: 0%;
			margin: 0 0 32px;
			margin-bottom:42px;
		}

		.cta-content .cta-desc {
			width: 100%;
			padding: 0 64px 0 0;
			font-family: Noto Sans JP;
			font-weight: 400;
			font-style: Regular;
			font-size: 14px;
			leading-trim: NONE;
			line-height: 140%;
			letter-spacing: 0%;
		}

		.cta-arrow::after {
			content: "";
			position: absolute;
			width: 40px;
			height: 40px;
			background: url("/common/asset/arrow_white.svg") no-repeat center / contain;
			bottom: 0;
			right: 0;
		}


		.footer-container {
			max-width: 100%;
			margin: 0;
			padding: 0;
			padding-bottom: 0px;
		}

		.footer-logo-row {
			height: 80px;
			margin: 0;
		}

		.footer-logo-img {
			width: 187px;
			height: 57px;
		}

		.footer-divider.mb40 {
			margin: 0 0 24px;
		}

		.footer-section {
			grid-template-columns: 1fr;
			row-gap: 24px;
			margin: 0 0 40px;
		}

		.contact-label {
			color: #000000;
			text-decoration: none;
			padding: 0;
			border: none;
			gap: 0;
			margin: 0;
			font-family: Noto Sans JP;
			font-weight: 400;
			font-style: Regular;
			font-size: 14px;
			leading-trim: NONE;
			line-height: 140%;
			letter-spacing: 0%;
		}

		.tel {
			padding: 0;
			border: none;
			margin: 0;
			height: auto;

			color: #000000;
			text-decoration: none;
			font-family: Noto Sans JP;
			font-weight: 400;
			font-style: Regular;
			font-size: 14px;
			leading-trim: NONE;
			line-height: 140%;
			letter-spacing: 0%;
		}

		.tel a {
			color: #000000;
			text-decoration: none;
			font-family: Noto Sans JP;
			font-weight: 400;
			font-style: Regular;
			font-size: 14px;
			leading-trim: NONE;
			line-height: 140%;
			letter-spacing: 0%;
		}

		.hours {
			color: #000000;
			text-decoration: none;
			font-family: Noto Sans JP;
			font-weight: 400;
			font-style: Regular;
			font-size: 14px;
			leading-trim: NONE;
			line-height: 140%;
			letter-spacing: 0%;
		}

		.footer-badges {
			display: flex;
			align-items: center;
			gap: 12px;
			margin-top: 24px;
		}

		.footer-badges .badge-gmo {
			display: block;
			width: 145px;
			height: 76px;
			opacity: 1;
		}

		.footer-links-wrap {
			width: 100%;
			max-width: none;
		}

		.footer-links {
			list-style: none;
			margin: 0;
			padding: 0;
			display: grid;
			grid-template-columns: repeat(2, minmax(170px, 1fr));
			column-gap: 24px;
			row-gap: 24px;
			width: 100%;
		}

		.footer-links LI {
			height: auto;
			line-height: auto;
		}

		.footer-links a {
			color: #151515;
			text-decoration: none;
			display: inline-block;
			padding: 0;
			font-family: Noto Sans JP;
			font-weight: 400;
			font-style: Regular;
			font-size: 14px;
			leading-trim: NONE;
			line-height: 17px;
			letter-spacing: 0%;
		}


		.sp {
			display: block;
		}
		.pc {
			display: none;
		}


		.footer-bottom_sp {
			display: block;
		}
		.footer-bottom {
			display: none;
		}

		.footer-bottom_privacy {
			text-align: left;
			width: 50%;
		}

		.footer-bottom_legal {
			text-align: right;
			width: 50%;
		}


		.legal {
			gap: 8px;
			padding-right: 15px;
		}

		.copyright {
			color: #9C9C9C;
			font-family: Satoshi;
			font-weight: 400;
			font-style: Regular;
			font-size: 14px;
			leading-trim: NONE;
			line-height: 100%;
			letter-spacing: 3%;
			text-align: right;
			margin-top: 24px;
			margin-bottom: 24px;
		}

		.cta-content2{
			margin-top: -15px;
			height: 130%;
		}

	}


	@media screen and (min-width:1025px){
		.footer-cta{
			margin-top: 10px;
			/*width:99%;*/
			padding-left: 32px;
			padding-right: 32px;
		}
		.cta-card.contact{
			height: 340px;
		}
		.cta-card.recruit{
			height: 340px;
		}
		.cta-content{
			width:86.5%;
		}
		.footer-bottom{
			width:86.5%;
		}
		.footer-container{
			padding-top: 60px;
			width:86.5%;
		}
		.copyright{
			font-size: 14px;
		}
		.footer-badges{
			margin-top: 30px;
	        padding-top: 10px;
	        margin-bottom: -10px;
			padding-left: 5px;
		}

		.footer-bottom{
			padding-top: 0px;
		}
		.footer-hr hr{
			margin-bottom: 4px;
		}
		.mb40{
			margin-bottom: 0px;
			margin-top: 20px;
		}
		.lang{
			margin-right: -15px;
		}
		.legal{
			padding-right: 20px;
		}
		.footer-section{
			margin-top: 35px;
		}
		.footer-logo-row{
			margin-left: 0px;
		}

		.footer-logo-img {
		    width: 237px;
		    height: auto;
		}

	}