@charset "utf-8";

/* ============================================================
   全体レイアウト
   ============================================================ */
.service-new-area {
	width: 1000px;
	margin: 0 auto;
	padding: 80px 0;
}
.banner-card-wrap {
	position: relative;
}

/* ============================================================
   NEW SERVICE バッジ（変更なし・視認性OK）
   ============================================================ */
.badge-new {
	position: absolute;
	top: -14px;
	left: 40px;
	z-index: 2;
	
	display: inline-block;
	padding: 8px 22px 8px 20px;
	background: linear-gradient(135deg, #d9ad4d 0%, #c79b3b 100%);
	color: #0a2540;
	clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
	box-shadow: 0 4px 14px rgba(199, 155, 59, 0.35);

	font-size: 1.4rem;
	line-height: 1.1;
    font-family: var(--montserrat);
    font-weight: 700;
	letter-spacing: 0.08em;
}

/* ============================================================
   バナーカード本体：明るいブルー系背景
   ============================================================ */
.banner-card {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	padding: 64px 60px;
	background:
		radial-gradient(circle at 15% 30%, rgba(255, 255, 255, 0.6) 0%, transparent 55%),
		linear-gradient(135deg, #d6ecfb 0%, #bfe0fa 45%, #eaf6ff 100%);
	box-shadow: 0 20px 50px rgba(0, 107, 224, 0.12);
}

/* 背景の装飾ドット */
.banner-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(rgba(0, 107, 224, 0.1) 1px, transparent 1px);
	background-size: 22px 22px;
	mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, transparent 70%);
	pointer-events: none;
}

/* ============================================================
   banner-orbit
   ============================================================ */
.banner-orbit {
	position: absolute;
	top: 50%;
	right: -90px;
	z-index: 0;
	width: 300px;
	height: 300px;
	transform: translateY(-50%);
	pointer-events: none;
}
.orbit-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid rgba(0, 107, 224, 0.25);
}
.orbit-ring-inner {
	inset: 30px;
}
.orbit-core {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 130px;
	height: 130px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;

	font-size: 2.6rem;
	line-height: 1.1;
    font-family: var(--montserrat);
    font-weight: 500;
	letter-spacing: 0.05em;
}
.orbit-dot {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--blue);
	box-shadow: 0 0 0 4px rgba(0, 107, 224, 0.15);
}
.orbit-dot01 { 
	top: 26px;
	left: 55px; 
}
.orbit-dot02 { 
	bottom: 30px;
	left: 108px; 
}

/* ============================================================
   コピー部分：2カラム
   ============================================================ */
.banner-copy {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 30px;
}

.copy-left {
	flex: 0 0 auto;
}
.copy-left .tagline {
	display: inline-block;
	margin-bottom: 15px;
	color: #a97f2c;
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}
.copy-left h3 {
	color: #0a2540;
	font-family: serif;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.6;
}
.copy-left h3 span {
	background: linear-gradient(90deg, var(--blue), #0050ad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.copy-right {
	flex: 0 0 auto;
	padding-left: 40px;
	border-left: 1px solid rgba(10, 37, 64, 0.15);
	text-align: left;
}
.copy-right .desc {
	margin-bottom: 20px;
	font-size: 1.6rem;
	line-height: 1.8;
}
.copy-right .desc .bold {
	color: #a97f2c;
	font-weight: 700;
}

/* ============================================================
   CTAボタン（ゴールドのまま・明るい背景でも視認性◎）
   ============================================================ */
.cta-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 35px;
	background: linear-gradient(135deg, #e0b458, #c79b3b);
	color: #0a2540;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	border-radius: 2px;
	transition: 0.3s
}
.cta-btn i {
	transition: 0.3s;
}
.cta-btn:hover {
	transform: translateY(-3px);
	background: linear-gradient(135deg, color-mix(in srgb, #e0b458 70%, white), color-mix(in srgb, #c79b3b 70%, white));
}
.cta-btn:hover i {
	transform: translateX(4px);
}

@media screen and (max-width: 768px) {
	.service-new-area {
		width: 100%;
		padding: 10px 20px 40px;
		margin: 0 0;
	}

	.badge-new {
		top: -12px;
		left: 20px;
		padding: 6px 16px 6px 14px;
		font-size: 1.1rem;
	}

	.banner-card {
		padding: 40px 25px 30px;
	}

	.banner-orbit {
		top: 0;
		right: -60px;
		width: 160px;
		height: 160px;
		transform: none;
		opacity: 0.6;
	}
	.orbit-ring-inner {
		inset: 16px;
	}
	.orbit-core {
		width: 70px;
		height: 70px;
		font-size: 1.6rem;
	}
	.orbit-dot {
		width: 7px;
		height: 7px;
	}
	.orbit-dot01 {
		top: 14px;
		left: 30px;
	}
	.orbit-dot02 {
		bottom: 16px;
		left: 58px;
	}

	.banner-copy {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.copy-left {
		width: 100%;
	}
	.copy-left .tagline {
		margin-bottom: 10px;
		font-size: 1.5rem;
	}
	.copy-left h3 {
		font-size: 2.2rem;
		line-height: 1.5;
	}

	.copy-right {
		width: 100%;
		padding-left: 0;
		padding-top: 20px;
		border-left: none;
		border-top: 1px solid rgba(10, 37, 64, 0.15);
	}
	.copy-right .desc {
		margin-bottom: 15px;
		font-size: 1.4rem;
		line-height: 1.6;
	}

	.cta-btn {
		width: 100%;
		justify-content: center;
		padding: 15px 20px;
		font-size: 1.4rem;
	}
	
}