/* =============================================================
   CCSI Site Footer  —  Dark editorial
   ============================================================= */

/* ---------- 既存テーマの茶系上書きを無効化 ----------------------- */
.btm-content,
.btm-content a,
footer,
footer a {
	background-color: transparent !important;
}

/* ---------- Wrapper ----------------------------------------- */
.ccsi-footer{
	position: relative;
	background:
		radial-gradient(900px 480px at 8% 0%, rgba(123,143,217,.16) 0%, transparent 60%),
		radial-gradient(900px 500px at 100% 100%, rgba(138,108,240,.12) 0%, transparent 60%),
		linear-gradient(180deg, #0f172a 0%, #0a1024 100%);
	color: #e2e8f0;
	font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
	font-size: 17px; /* メディア標準 */
	line-height: 1.8;
	overflow: hidden;
	margin-top: clamp(48px, 6vw, 80px);
}
.ccsi-footer::before{
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(123,143,217,.6) 50%, transparent 100%);
}
.ccsi-footer::after{
	content: "";
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 80%);
	pointer-events: none;
}

.ccsi-footer__inner{
	width: 100%;
	padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 80px) 0;
	position: relative;
	z-index: 1;
}

/* ---------- Top grid ---------------------------------------- */
.ccsi-footer__grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(36px, 5vw, 56px);
	padding-bottom: clamp(48px, 6vw, 80px);
	border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (min-width: 720px){
	.ccsi-footer__grid{ grid-template-columns: 1.6fr 1fr 1fr; }
}
@media (min-width: 1080px){
	.ccsi-footer__grid{ grid-template-columns: 1.8fr 1fr 1fr 1fr; }
}

/* ---------- Brand column ------------------------------------ */
.ccsi-footer__brand{ max-width: 460px; }
.ccsi-footer__logo{
	display: inline-flex;
	margin-bottom: 1.4rem;
}
.ccsi-footer__logo img{
	max-width: 200px;
	max-height: 64px;
	width: auto; height: auto;
	filter: brightness(1.05);
}
.ccsi-footer__desc{
	font-size: 1.0625rem; /* 17px */
	color: rgba(226,232,240,.78);
	margin: 0 0 1.6rem;
	max-width: 44ch;
	line-height: 1.85;
}

/* ---------- Social icons ------------------------------------ */
.ccsi-footer__social{
	display: flex;
	gap: .7rem;
	margin-top: .4rem;
	flex-wrap: wrap;
}
.ccsi-footer__social a{
	width: 42px; height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 12px;
	color: rgba(226,232,240,.85);
	background: rgba(255,255,255,.02);
	transition: border-color .2s ease, color .2s ease, background .2s ease, transform .15s ease;
}
.ccsi-footer__social a:hover{
	color: #fff;
	border-color: #7B8FD9;
	background: rgba(123,143,217,.18);
	transform: translateY(-2px);
}
.ccsi-footer__social svg{ width: 18px; height: 18px; }

/* ---------- Column / heading / widget area ------------------ */
.ccsi-footer__col h3,
.ccsi-footer__col .widget-title,
.ccsi-footer__col .widgettitle{
	font-size: .875rem !important; /* 14px */
	font-weight: 700 !important;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #b8c4ee !important;
	margin: 0 0 1.2rem !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}
.ccsi-footer__col ul{
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: .6rem;
}
.ccsi-footer__col li{
	margin: 0;
	border: 0;
	padding: 0;
}
.ccsi-footer__col li::before{ content: ""; display: none; }
.ccsi-footer__col a{
	color: rgba(226,232,240,.78);
	text-decoration: none;
	font-size: 1.0625rem; /* 17px */
	transition: color .15s ease, transform .15s ease;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}
.ccsi-footer__col a:hover{
	color: #fff;
	transform: translateX(2px);
}
.ccsi-footer__col a:hover::before{
	content: "→";
	color: #7B8FD9;
	font-family: var(--ft-font-mono, ui-monospace);
}

/* ---------- Bottom bar ------------------------------------- */
.ccsi-footer__bar{
	display: flex;
	flex-direction: column;
	gap: .8rem;
	padding: 1.6rem 0 2rem;
	font-size: .9375rem; /* 15px */
	color: rgba(226,232,240,.6);
}
@media (min-width: 720px){
	.ccsi-footer__bar{ flex-direction: row; align-items: center; justify-content: space-between; }
}
.ccsi-footer__copy{
	margin: 0;
	font-family: ui-monospace, "JetBrains Mono", monospace;
	font-size: .9375rem; /* 15px */
	letter-spacing: .04em;
}
.ccsi-footer__legal{
	display: flex;
	gap: 1.3rem;
	flex-wrap: wrap;
}
.ccsi-footer__legal a{
	color: rgba(226,232,240,.6);
	text-decoration: none;
	font-size: .9375rem; /* 15px */
	transition: color .15s ease;
}
.ccsi-footer__legal a:hover{ color: #fff; }

/* ---------- Page top floating button ----------------------- */
.ccsi-pagetop{
	position: fixed;
	right: clamp(16px, 3vw, 32px);
	bottom: clamp(16px, 3vw, 32px);
	width: 48px; height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(15,23,42,.86);
	color: #fff;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.14);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	text-decoration: none !important;
	z-index: 80;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease, background .2s ease, border-color .2s ease;
	pointer-events: none;
	box-shadow: 0 14px 28px -16px rgba(0,0,0,.6);
}
.ccsi-pagetop.is-visible{
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.ccsi-pagetop:hover{
	background: #1e293b;
	border-color: #7B8FD9;
	color: #fff !important;
}
.ccsi-pagetop svg{ width: 18px; height: 18px; }
.ccsi-pagetop span{
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
}

/* ---------- 旧テーマとの互換上書き ---------------------------- */
.btm-content,
.pagetop-wrap,
.copylight{ display: none !important; }
.ccsi-footer .container,
.ccsi-footer .container-fluid,
.ccsi-footer .container-large{
	padding-left: 0 !important;
	padding-right: 0 !important;
	max-width: none !important;
}