/* ============================================================
   components.css — 共通部品: ボタン(.btn) / ニュース行(.news-link) / 実績カード(.work-card) / 下層MV(.mv)+パンくず / ページャ / CTA3カード(.cta-*)
   ※ タブレット/流体/1440超えなどの横断調整は overrides.css（最後に読込）にある
   ============================================================ */

/* ============================================================
   CTAボタン（docs/spec/hover-animation.html 確定仕様）
   ============================================================ */
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 62px;
width: auto;
min-width: 287px;
padding: 12px 16px 12px 54px;
border-radius: 50px;
background: var(--color-navy);
color: var(--color-font-white);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn__label { font-size: 20px; line-height: 1.6; font-weight: 700; white-space: nowrap; }

.btn__circle {
display: block;
width: 55px;
height: 55px;
border-radius: 50%;
background: var(--color-yellow-dusty);
transition: transform 0.3s ease;
}

.btn__arrow {
position: absolute;
right: 16px;
top: 50%;
width: 55px;
height: 55px;
margin-top: -27.5px;
color: var(--color-navy);
transition: transform 0.4s var(--ease-bounce);
}

.btn--white { background: #fff; color: var(--color-navy); }

.btn--small {
width: auto;
min-width: 0;
gap: 32px;
padding: 6px 8px 6px 32px;
border-radius: 29.617px;
}

.btn--small .btn__label { font-size: 16px; }

.btn--small .btn__circle { width: 32.58px; height: 32.58px; }

.btn--small .btn__arrow { width: 32.58px; height: 32.58px; margin-top: -16.29px; right: 8px; }

.btn:focus-visible {
outline: 2px solid var(--color-yellow-dusty);
outline-offset: 3px;
transform: scale(0.99);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, .15), 0 2px 4px rgba(26, 43, 81, .1);
}

.btn:focus-visible .btn__circle { transform: scale(1.08); }

.btn:focus-visible .btn__arrow { transform: translateX(6px) scale(1.1); }

@media (hover: hover) and (pointer: fine) {
	a.btn:hover {
		transform: scale(0.99);
		box-shadow: inset 0 1px 4px rgba(0, 0, 0, .15), 0 2px 4px rgba(26, 43, 81, .1);
	}

	a.btn:hover .btn__circle { transform: scale(1.08); }

	a.btn:hover .btn__arrow { transform: translateX(6px) scale(1.1); }

	a.btn--small:hover .btn__circle { transform: scale(1.05); }

	a.btn--small:hover .btn__arrow { transform: translateX(4px) scale(1.05); }

}

/* ---- work-card（docs/spec/hover-animation.html 準拠・カード全体が1リンク） ---- */
.work-card {
display: flex;
flex-direction: column;
gap: 8px;
width: 360px;
padding: 12px;
border-radius: 10px;
background: var(--color-bg-white);
overflow: hidden;
}

.work-card__media { position: relative; display: block; overflow: hidden; }

.work-card__img { width: 100%; height: 213px; object-fit: cover; transition: transform 0.4s ease; }

.work-card__tag {
position: absolute;
left: 0;
top: 1px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 12px;
border-radius: 10px;
background: var(--color-navy);
color: #fff;
font-size: 14px;
line-height: 1;
white-space: nowrap;
}

.work-card__body {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
flex: 1;
padding: 16px 20px;
}

.work-card__text { display: flex; flex-direction: column; gap: 10px; transition: opacity 0.25s ease; }

.work-card__title { font-size: 20px; line-height: 1.6; font-weight: 500; letter-spacing: 2px; color: var(--color-font-black); }

.work-card__divider { border-top: 1px solid var(--color-navy); }

.work-card__desc { font-size: 16px; line-height: 1.6; color: var(--color-font-black); }

.work-card__cta { display: flex; justify-content: flex-end; }

.work-card:focus-visible { outline: 2px solid var(--color-yellow-dusty); outline-offset: -2px; }

@media (hover: hover) and (pointer: fine) {
	.work-card:hover .work-card__img { transform: scale(1.03); }

	.work-card:hover .work-card__text { opacity: 0.6; }

	.work-card:hover .btn--small {
		transform: scale(0.99);
		box-shadow: inset 0 1px 4px rgba(0, 0, 0, .15), 0 2px 4px rgba(26, 43, 81, .1);
	}

	.work-card:hover .btn--small .btn__circle { transform: scale(1.05); }

	.work-card:hover .btn--small .btn__arrow { transform: translateX(4px) scale(1.05); }

}

@media (max-width: 767px) {
	.work-card { width: 100%; }

}

/* ============================================================
   ニュース行（.news-link — spec準拠。TOP・一覧共用）
   ============================================================ */
.news-link {
display: flex;
align-items: center;
justify-content: space-between;
height: 111px;
padding: 24px 10px 25px 20px;
border-bottom: 1px solid var(--color-gray-200);
}

.news-link__content {
display: flex;
align-items: center;
gap: 24px;
min-width: 0;
transition: opacity 0.25s ease;
}

.news-link__date {
width: 120px;
flex-shrink: 0;
font-family: var(--font-en);
font-weight: 600;
font-size: 16px;
line-height: 1;
color: var(--color-font-black);
}

.news-link__tag {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
border-radius: 10px;
background: var(--color-navy);
color: #fff;
font-size: 14px;
line-height: 1;
white-space: nowrap;
}

.news-link__title {
font-size: 18px;
line-height: 1.6;
color: var(--color-font-black);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 400px;
}

.news-link__arrow-box {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 67.5px;
height: 67.5px;
color: var(--color-font-black);
transition: transform 0.4s var(--ease-bounce);
}

.news-link__arrow { transform: rotate(-90deg); }

.news-link:focus-visible { outline: 2px solid var(--color-yellow-dusty); outline-offset: -2px; }

@media (hover: hover) and (pointer: fine) {
	.news-link:hover .news-link__content { opacity: 0.6; }

	.news-link:hover .news-link__arrow-box { transform: translateX(6px); }

}

@media (max-width: 767px) {
	.news-link { height: auto; padding: 20px 4px; gap: 8px; }

	.news-link__content { flex-wrap: wrap; gap: 8px 12px; }

	.news-link__arrow-box { width: 32px; height: 32px; }

}

/* ============================================================
   CTA-group（Figma 234:38836 / SP 380:18476）
   ============================================================ */
.cta-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
padding: 64px 40px;
background: var(--color-bg-gray);
}

.cta-group__row { display: flex; gap: 32px; width: 100%; max-width: 1370px; }

.cta-card {
position: relative;
display: flex;
overflow: hidden;
border-radius: 45px;
height: 538px;
color: #fff;
}

.cta-card--recruit { width: 100%; max-width: 1370px; }

.cta-card--form { width: 820px; flex-shrink: 0; }

.cta-card--tel { flex: 1; }

/* 背景写真（Figma実測の%値・object-fit cover は使わない） */
.cta-card__photo {
position: absolute;
width: 114.84%;
height: 164.8%;
left: -6.79%;
top: -32.44%;
max-width: none;
transition: transform 0.4s ease;
object-fit:cover;
}

.cta-card--form .cta-card__photo,
.cta-card--tel .cta-card__photo {
width: 100%;
height: 100%;
left: 0;
top: 0;
object-fit: cover;
}

.cta-card__overlay { position: absolute; inset: 0; pointer-events: none; }

.cta-card__overlay--recruit { background: linear-gradient(280deg, rgba(0, 0, 0, 0.20) 44.28%, rgba(255, 255, 255, 0.20) 83.39%); }

.cta-card__overlay--navy { background: rgba(26, 43, 81, 0.8); }

.cta-card__overlay--black { background: rgba(26, 27, 26, 0.8); }

.cta-card__inner {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
padding: 50px 48px 48px;
}

.cta-card__inner--right { align-items: flex-end; padding: 50px 83px 48px 81px; }

@media (min-width: 768px) {
	.cta-card__inner--right > .cta-card__title,
	.cta-card__inner--right > .cta-card__bottom { width: auto; max-width: 100%; align-items: flex-start; }

}

@media (min-width: 1200px) {
	.cta-card__inner--right { padding-right: 166px; }

	.cta-card__inner--right > .cta-card__title,
	.cta-card__inner--right > .cta-card__bottom { width: 486px; }

	.cta-card__text { white-space: nowrap; }

}

.cta-card__inner--right .cta-card__bottom { align-items: flex-start; }

.cta-card__title { display: flex; flex-direction: column; }

.cta-card__en {
font-family: var(--font-en);
font-weight: 600;
font-size: 120px;
line-height: 1;
letter-spacing: -2px;
margin-bottom: -8px;
transform: scaleY(0.97);
transform-origin: top left;
}

.cta-card__ja { font-size: 32px; line-height: 1.6; font-weight: 500; }

.cta-card__bottom { display: flex; flex-direction: column; gap: 8px; }

.cta-card__text { font-size: 24px; line-height: 1.6; }

.cta-card__btn-wrap { display: flex; justify-content: flex-end; width: 100%; }

.cta-card--tel .cta-card__inner { padding: 45px 40px; }

.cta-card__tel { display: flex; flex-direction: column; gap: 29px; }

.cta-card__tel-note { display: flex; flex-direction: column; gap: 5px; color: var(--color-gray-200); }

.cta-card__tel-label { font-size: 18px; line-height: 1.6; }

.cta-card__tel-hours { font-family: var(--font-en); font-weight: 600; font-size: 30px; line-height: 1; }

.cta-card--tel .cta-card__inner { container-type: inline-size; }
/* 番号は可用幅(inner=cqi)基準で可変: カンプ点(SP 36px/PC 56px)を通る直線と、
   行幅8.25em(実測)が収まる保証項のmin。実データが長くても枠内に収まる */
.cta-card__tel-number { display: flex; align-items: flex-end; gap: 0.2em; font-size: clamp(20px, min(17.1cqi - 17.2px, 11.9cqi), 56px); }

.cta-card__tel-number span {
font-family: var(--font-en);
font-weight: 800;
font-size: 1em;
line-height: 1;
letter-spacing: 0.036em;
color: #fff;
white-space: nowrap;
}

/* アイコンbox=0.96em（カンプ実測: PC グリフ40px=box53px/56px・SP box37px/38.3px。viewBox余白25%込み） */
.cta-card__tel-number img { width: 0.96em; height: 0.96em; }

.cta-card:focus-visible { outline: 2px solid var(--color-yellow-dusty); outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
	.cta-card--recruit:hover .cta-card__photo,
	.cta-card--form:hover .cta-card__photo,
	.cta-card--tel:hover .cta-card__photo { transform: scale(1.03); }

	.cta-card--recruit:hover .btn,
	.cta-card--form:hover .btn {
		transform: scale(0.99);
		box-shadow: inset 0 1px 4px rgba(0, 0, 0, .15), 0 2px 4px rgba(26, 43, 81, .1);
	}

	.cta-card--recruit:hover .btn__circle,
	.cta-card--form:hover .btn__circle { transform: scale(1.08); }

	.cta-card--recruit:hover .btn__arrow,
	.cta-card--form:hover .btn__arrow { transform: translateX(6px) scale(1.1); }

}

@media (max-width: 767px) {
	.cta-group { gap: 16px; padding: 32px 16px; }

	.cta-group__row { flex-direction: column; gap: 16px; }

	.cta-card { height: auto; min-height: 360px; border-radius: 20px; }

	.cta-card--form, .cta-card--tel { width: 100%; }

	.cta-card__inner, .cta-card__inner--right { padding: 24px 16px; align-items: stretch; }

	.cta-card__en { font-size: 60px; font-weight: 700; }

	.cta-card__ja { font-size: 24px; letter-spacing: 2px; }

	.cta-card__text { font-size: 18px; }

	.cta-card__bottom { margin-top: 40px; }

	.cta-card .btn { width: 100%; min-width: 0; }

	.cta-card--recruit .btn { width: auto; padding: 12px 16px 12px 54px; gap: 32px; }

	.cta-card--form .btn { padding: 12px 16px 12px 24px; }

	.btn { padding: 12px 16px 12px 54px; gap: 12px; }

	.btn__label { font-size: 20px; }

	.btn--small { padding: 6px 8px 6px 32px; gap: 32px; }

	.btn--small .btn__label { font-size: 16px; }

	.btn--small .btn__arrow { right: 8px; }

	.cta-card__tel { margin-top: auto; padding-top: 40px; gap: 8px; }

	.cta-card--form .cta-card__text br { display: none; }



}

/* ============================================================
   下層共通MV + パンくず（Figma 298:53950）
   ============================================================ */
.mv {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 600px;
padding: 200px 80px 20px;
background: var(--color-bg-gray);
overflow: hidden;
}

.mv__img {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 720px;
height: 405px;
border-radius: 20px 0 0 20px;
overflow: hidden;
}

.mv__img img { width: 100%; height: 100%; object-fit: cover; }

.mv__title { position: relative; }

.mv__en {
font-family: var(--font-en);
font-weight: 600;
font-size: 180px;
line-height: 0.8;
letter-spacing: -2px;
color: var(--color-gray-400);
margin-bottom: -40px;
transform: scaleY(0.97);
transform-origin: top left;
}

.mv__ja {
padding: 10px 20px;
font-size: 32px;
line-height: 1.6;
font-weight: 500;
color: var(--color-navy);
}

.breadcrumb { position: relative; display: flex; align-items: center; gap: 8px; }

.breadcrumb__home { display: flex; }

.breadcrumb__sep { transform: rotate(-90deg); }

.breadcrumb__current { font-size: 14px; line-height: 1; color: var(--color-font-black); }

@media (hover: hover) and (pointer: fine) {
	.breadcrumb__home { transition: opacity 0.3s ease; }

	.breadcrumb__home:hover { opacity: 0.6; }

}

.breadcrumb__home:focus-visible { outline: 2px solid var(--color-yellow-dusty); outline-offset: 2px; }

@media (max-width: 767px) {
	.mv { height: 460px; padding: 32px 16px 20px; gap: 0; }

	/* SP: ENは写真の裏・和文は写真の前(カンプ515:25632の重なり順)。
	   title全体を前に出すとEN2行のページ(privacy等)で文字が被りすぎる */
	.mv__title { order: 1; }
	.mv__ja { position: relative; z-index: 1; }

	.mv__img {
		position: absolute;
		right: 0;
		top: 128px;
		width: 310px;
		height: 280px;
		transform: none;
		border-radius: 20px 0 0 20px;
	}

	.breadcrumb { order: 3; z-index: 1; }

	.mv__en { margin-bottom: -40px; font-size: 80px; font-weight: 700; line-height: 1; }

	.mv__ja { padding: 10px 16px; font-size: 24px; }

}

/* ページネーション */
.pagination { margin-top: 40px; }

.pagination .nav-links { display: flex; gap: 8px; align-items: center; }

.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 12px;
border-radius: 50%;
background: var(--color-bg-white);
color: var(--color-navy);
font-family: var(--font-en);
font-weight: 600;
font-size: 16px;
}

.pagination .page-numbers.current { background: var(--color-navy); color: #fff; }

@media (hover: hover) and (pointer: fine) {
	.pagination a.page-numbers { transition: opacity 0.3s ease; }

	.pagination a.page-numbers:hover { opacity: 0.6; }

}

/* ============================================================
   お知らせ詳細（Figma 273:49912）
   ============================================================ */
.mv--single { padding: 20px 80px; max-height: 600px; justify-content: space-between; gap: 20px}

.mv--single__photo {
width: 100%;
max-width: 1280px;
height: 520px;
margin: 0 auto;
border-radius: 20px;
overflow: hidden;
}

.mv--single__photo img { width: 100%; height: 100%; object-fit: cover; }

.breadcrumb__link { font-size: 14px; line-height: 1; color: var(--color-font-black); }

.breadcrumb__current--clamp {
max-width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

@media (hover: hover) and (pointer: fine) {
	.breadcrumb__link { transition: opacity 0.3s ease; }

	.breadcrumb__link:hover { opacity: 0.6; }

}

@media (max-width: 767px) {
	.mv--single { padding: 8px 16px 16px; height: auto; gap: 16px; }

	.mv--single__photo { height: 260px; border-radius: 20px; }

	.breadcrumb__current--clamp { max-width: 180px; }

}

.btn--submit { border: 0; cursor: pointer; font-family: var(--font-ja); }

.breadcrumb--works { background: var(--color-bg-gray); padding: 0 80px 20px; }

@media (max-width: 767px) {
	.breadcrumb--works { padding: 0 16px 16px; }

}