@charset "UTF-8";
/* ============================================
   会社情報ページ
   design: ALION Company.dc.html
============================================ */

.cmp {
	color: #1A212F;
}

/* page.css の svg{width:100%;height:100%} を打ち消す */
.cmp svg {
	width: auto;
	height: auto;
	flex: 0 0 auto;
}

.cmp-inner {
	width: 90%;
	margin: 0 auto;
	max-width: 1200px;
}

.cmp-secTtl {
	font-family: 'Chillax', 'Chillax-local', sans-serif;
	font-size: min(72px, 10vw);
	line-height: 100%;
	font-weight: 500;
	letter-spacing: normal;
}

.cmp-badge {
	display: inline-block;
	font-size: 14px;
	padding: 4px 16px;
	border-radius: 100px;
	color: #fff;
	background-color: #005FFF;
	font-weight: 600;
	line-height: 160%;
	letter-spacing: normal;
	white-space: nowrap;
	margin-top: 12px;
}

/* ---- Hero ---- */
.cmpHero {
	position: relative;
	background: #1A212F;
	overflow: hidden;
	padding: 172px 0 86px;
}

.cmpHero-marquee {
	position: absolute;
	left: 0;
	bottom: -14px;
	z-index: 0;
	display: flex;
	width: max-content;
	animation: cmpMqL 62s linear infinite;
	pointer-events: none;
}

.cmpHero-marquee span {
	font-family: 'Chillax', 'Chillax-local', sans-serif;
	font-size: 200px;
	font-weight: 500;
	line-height: .9;
	letter-spacing: normal;
	color: rgba(255, 255, 255, .05);
	white-space: nowrap;
	padding-right: 70px;
	flex: 0 0 auto;
}

@keyframes cmpMqL {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.cmpHero-inner {
	position: relative;
	z-index: 1;
	width: 90%;
	margin: 0 auto;
	max-width: 1200px;
	color: #fff;
}

.cmpHero-tag {
	display: inline-block;
	font-size: 14px;
	padding: 4px 14px;
	border-radius: 100px;
	color: #fff;
	background-color: #005FFF;
	font-weight: 600;
	line-height: 160%;
	letter-spacing: normal;
}

.cmpHero-ttl {
	font-family: 'Chillax', 'Chillax-local', sans-serif;
	font-size: min(112px, 13vw);
	line-height: 104%;
	letter-spacing: normal;
	font-weight: 500;
	margin-top: 16px;
	color: #fff;
}

.cmpHero-lead {
	font-size: min(17px, 4vw);
	line-height: 200%;
	letter-spacing: normal;
	color: rgba(255, 255, 255, .74);
	margin-top: 22px;
	max-width: 680px;
	text-wrap: pretty;
}

/* ---- Mission ---- */
.cmpMission {
	position: relative;
	background: #fff;
	padding: 110px 0 100px;
	overflow: hidden;
}

.cmpMission-orb,
.cmpMission-ring1,
.cmpMission-ring2 {
	position: absolute;
	border-radius: 50%;
	aspect-ratio: 1;
	pointer-events: none;
}

.cmpMission-orb {
	right: -140px;
	top: 40px;
	width: min(720px, 68vw);
	background: radial-gradient(circle at 40% 35%, rgba(94, 206, 229, .20), rgba(0, 95, 255, .10) 46%, rgba(255, 255, 255, 0) 70%);
}

.cmpMission-ring1 {
	right: min(70px, 6vw);
	top: 120px;
	width: min(420px, 42vw);
	border: 1px solid rgba(0, 95, 255, .14);
}

.cmpMission-ring2 {
	right: min(140px, 10vw);
	top: 200px;
	width: min(280px, 28vw);
	border: 1px solid rgba(0, 95, 255, .10);
}

.cmpMission-inner {
	position: relative;
	z-index: 1;
}

.cmpMission-ttl {
	font-family: 'Chillax', 'Chillax-local', sans-serif;
	font-size: min(96px, 12vw);
	line-height: 100%;
	letter-spacing: normal;
	font-weight: 500;
}

.cmpMission-badge {
	margin-top: 14px;
}

.cmpMission-statement {
	font-size: min(52px, 6.6vw);
	font-weight: 700;
	line-height: 158%;
	letter-spacing: normal;
	margin-top: 52px;
	max-width: 1000px;
	text-wrap: pretty;
	color: #1A212F;
}

.cmpMission-statement .blue {
	color: #005FFF;
}

.cmpMission-en {
	font-size: min(16px, 3.6vw);
	font-style: italic;
	line-height: 190%;
	letter-spacing: normal;
	color: #5B6472;
	margin-top: 34px;
	max-width: 820px;
}

.cmpMission-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
	margin-top: 60px;
}

.cmpMission-card {
	background: #fff;
	border: 1px solid #E4E8EE;
	border-radius: 18px;
	padding: 34px min(34px, 4vw);
}

.cmpMission-card .label {
	font-size: 12px;
	font-weight: 700;
	color: #005FFF;
	letter-spacing: .14em;
	line-height: 1.6;
}

.cmpMission-card h3 {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.85;
	letter-spacing: normal;
	margin-top: 12px;
	text-wrap: pretty;
}

.cmpMission-card p {
	font-size: 13px;
	line-height: 1.95;
	color: #5B6472;
	letter-spacing: normal;
	margin-top: 12px;
	text-wrap: pretty;
}

/* ---- Member ---- */
.cmpMember {
	background: #F9FAFB;
	padding: 100px 0;
}

.cmpMember-lead {
	font-size: 15px;
	line-height: 1.95;
	color: #5B6472;
	letter-spacing: normal;
	margin-top: 26px;
	max-width: 720px;
	text-wrap: pretty;
}

.cmpMember-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 28px 24px;
	margin-top: 44px;
}

@media screen and (min-width:1024px) {
	.cmpMember-list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.cmpMember-item:nth-child(6) {
	grid-column: 1;
}

.cmpMember-item {
	width: auto;
	min-width: 0;
}

.cmpMember-item.member-listItem {
	cursor: pointer;
}

.cmpMember-photo {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 1;
	background: #EEF2F7;
	border: 1px solid #E4E8EE;
}

.cmpMember-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s;
}

.cmpMember-item.member-listItem:hover .cmpMember-photo img {
	transform: scale(1.04);
}

.cmpMember-more {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #1A212F;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .2s;
}

.cmpMember-more svg {
	width: 16px;
	height: 16px;
	display: block;
}

.cmpMember-item:hover .cmpMember-more {
	opacity: .82;
}

.cmpMember-name {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: normal;
	margin-top: 14px;
	line-height: 1.5;
}

.cmpMember-role {
	font-size: 12px;
	color: #005FFF;
	font-weight: 600;
	letter-spacing: normal;
	margin-top: 3px;
	line-height: 1.6;
}

/* ---- Office ---- */
.cmpOffice {
	background: #fff;
	padding: 100px 0;
}

.cmpOffice-head {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-end;
	justify-content: space-between;
}

.cmpOffice-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cmpOffice-tab {
	padding: 11px 18px;
	border-radius: 100px;
	font-size: 14px;
	letter-spacing: normal;
	cursor: pointer;
	white-space: nowrap;
	transition: all .25s;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: inherit;
	border: 1px solid #E4E8EE;
	background: #fff;
	color: #5B6472;
	font-weight: 600;
}

.cmpOffice-tab[aria-selected="true"] {
	border-color: #1A212F;
	background: #1A212F;
	color: #fff;
	font-weight: 700;
}

.cmpOffice-tab .tag {
	font-size: 10px;
	font-weight: 700;
	border-radius: 100px;
	padding: 2px 8px;
	line-height: 1.7;
	color: #8A94A3;
	background: #F1F3F6;
}

.cmpOffice-tab[aria-selected="true"] .tag {
	color: #1A212F;
	background: #fff;
}

.cmpOffice-panel {
	background: #fff;
	border: 1px solid #E4E8EE;
	border-radius: 20px;
	padding: min(34px, 4vw);
	display: flex;
	flex-wrap: wrap;
	gap: min(40px, 4vw);
	align-items: flex-start;
	margin-top: 34px;
}

.cmpOffice-panel[hidden] {
	display: none;
}

.cmpOffice-info {
	flex: 1 1 300px;
	min-width: 260px;
}

.cmpOffice-name {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.cmpOffice-name::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #005FFF;
	flex: 0 0 auto;
}

.cmpOffice-name p {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.5;
}

.cmpOffice-name .tag {
	font-size: 11px;
	font-weight: 700;
	color: #1A212F;
	background: #F1F3F6;
	border-radius: 100px;
	padding: 3px 10px;
	letter-spacing: normal;
}

.cmpOffice-addr {
	font-size: 14px;
	line-height: 1.95;
	color: #5B6472;
	letter-spacing: normal;
	margin-top: 14px;
}

.cmpOffice-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: #005FFF;
	letter-spacing: normal;
	margin-top: 18px;
}

.cmpOffice-link svg {
	width: 14px;
	height: 14px;
	display: block;
	flex: 0 0 auto;
}

.cmpOffice-map {
	flex: 1 1 380px;
	min-width: 280px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #E4E8EE;
}

.cmpOffice-map iframe {
	width: 100%;
	height: min(260px, 42vw);
	border: 0;
	display: block;
}

/* ---- Overview ---- */
.cmpOverview {
	background: #F9FAFB;
	padding: 100px 0;
}

.cmpOverview-inner {
	width: 90%;
	margin: 0 auto;
	max-width: 1000px;
}

.cmpOverview-head {
	margin-bottom: 36px;
}

.cmpOverview-head .label {
	font-size: 13px;
	font-weight: 700;
	color: #005FFF;
	letter-spacing: .14em;
	line-height: 1.6;
}

.cmpOverview-head h2 {
	font-size: min(38px, 6.4vw);
	font-weight: 700;
	letter-spacing: normal;
	margin-top: 8px;
	line-height: 1.4;
}

.cmpOverview-table {
	border: 1px solid #E4E8EE;
	border-radius: 20px;
	overflow: hidden;
	background: #fff;
}

.cmpOverview-row {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid #EEF1F5;
}

.cmpOverview-row:last-child {
	border-bottom: none;
}

.cmpOverview-row dt {
	flex: 0 0 30%;
	min-width: 150px;
	background: #F7F9FC;
	padding: 22px min(28px, 3vw);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: normal;
	line-height: 1.8;
}

.cmpOverview-row dd {
	flex: 1 1 300px;
	padding: 22px min(28px, 3vw);
	font-size: 14px;
	letter-spacing: normal;
	margin: 0;
	line-height: 1.9;
}

/* ---- Numbers ---- */
.cmpNumbers {
	position: relative;
	background: #1A212F;
	padding: 100px 0;
	overflow: hidden;
}

.cmpNumbers-glow {
	position: absolute;
	left: -160px;
	bottom: -160px;
	width: min(560px, 60vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 95, 255, .28), rgba(26, 33, 47, 0) 70%);
	pointer-events: none;
}

.cmpNumbers-inner {
	position: relative;
	z-index: 1;
	color: #fff;
}

.cmpNumbers .cmp-secTtl {
	color: #fff;
}

.cmpNumbers-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 18px;
	margin-top: 48px;
}

.cmpNumbers-card {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 18px;
	padding: 36px min(30px, 3.5vw);
}

.cmpNumbers-card .num {
	font-family: 'Chillax', 'Chillax-local', sans-serif;
	font-size: min(52px, 8vw);
	font-weight: 600;
	line-height: 1;
	color: #fff;
	letter-spacing: normal;
}

/* 単位は数字の下に積む（「最短 / 2ヶ月で稼働」のように数字でない見出しも入るため） */
.cmpNumbers-card .num .unit {
	display: block;
	font-size: 20px;
	font-weight: 500;
	color: rgba(255, 255, 255, .6);
	white-space: nowrap;
	margin-top: 6px;
}

.cmpNumbers-card .cap {
	font-size: 13px;
	color: rgba(255, 255, 255, .7);
	letter-spacing: normal;
	margin-top: 12px;
	line-height: 1.8;
}

.cmpNumbers-strengths {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.cmpNumbers-strength {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 18px;
	padding: 32px min(32px, 4vw);
}

.cmpNumbers-strength .label {
	font-size: 12px;
	font-weight: 700;
	color: #5ECEE5;
	letter-spacing: .14em;
	line-height: 1.6;
}

.cmpNumbers-strength h3 {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: normal;
	margin-top: 10px;
}

.cmpNumbers-strength p {
	font-size: 13px;
	color: rgba(255, 255, 255, .7);
	line-height: 1.9;
	letter-spacing: normal;
	margin-top: 10px;
}

.cmpNumbers-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
	margin-top: 40px;
}

.cmpNumbers-foot p {
	font-size: 15px;
	color: rgba(255, 255, 255, .8);
	letter-spacing: normal;
	line-height: 1.9;
	flex: 1 1 360px;
}

.cmpNumbers-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	color: #1A212F;
	font-weight: 700;
	padding: 16px 30px;
	border-radius: 100px;
	letter-spacing: normal;
	font-size: 15px;
	transition: all .3s;
}

.cmpNumbers-btn:hover {
	opacity: .85;
	color: #1A212F;
}

.cmpNumbers-btn svg {
	width: 15px;
	height: 15px;
	display: block;
	flex: 0 0 auto;
}

/* ============================================
   SP
============================================ */
@media screen and (max-width:768px) {

	.cmpHero {
		padding: 120px 0 64px;
	}

	.cmpHero-marquee span {
		font-size: 100px;
		padding-right: 40px;
	}

	.cmpHero-lead {
		margin-top: 18px;
		line-height: 190%;
	}

	.cmpMission {
		padding: 72px 0;
	}

	.cmpMission-cards {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.cmpMission-statement {
		font-size: 22px;
	}

	.cmpMission-en {
		font-size: 12px;
	}

	.cmpMember,
	.cmpOffice,
	.cmpOverview,
	.cmpNumbers {
		padding: 72px 0;
	}

	.cmpMember-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 12px;
		margin-top: 32px;
	}

	.cmpMember-more {
		width: 28px;
		height: 28px;
		right: 8px;
		bottom: 8px;
	}

	.cmpMember-name {
		font-size: 15px;
		margin-top: 10px;
	}

	.cmpOffice-head {
		display: block;
	}

	.cmpOffice-tabs {
		margin-top: 24px;
		flex-wrap: wrap;
	}

	.cmpOffice-panel {
		flex-direction: column;
		align-items: stretch;
		gap: 22px;
		padding: 22px;
		margin-top: 24px;
	}

	.cmpOffice-info {
		flex: 0 0 auto;
		min-width: 0;
	}

	.cmpOffice-map {
		flex: 0 0 auto;
		width: 100%;
		min-width: 0;
	}

	.cmpOffice-map iframe {
		height: 220px;
	}

	.cmpOverview-row {
		display: block;
	}

	.cmpOverview-row dt {
		background: transparent;
		padding: 18px 20px 0;
		font-size: 12px;
		color: #005FFF;
		min-width: 0;
	}

	.cmpOverview-row dd {
		padding: 6px 20px 18px;
	}

	.cmpNumbers-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.cmpNumbers-card {
		padding: 24px 18px;
	}

	.cmpNumbers-strengths {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.cmpNumbers-foot {
		display: block;
		text-align: center;
	}

	.cmpNumbers-btn {
		margin-top: 20px;
	}
}