/* グループswiper（子会社カード）の共有CSS。index.css 1125-1316 から /service/用にコピー。
   ※TOPはindex.cssの同一ルールを使用。将来 index.css から移設して完全DRY化も可（今はTOP無傷優先） */
.top_service_section {
		padding: 95px 0 160px;
		background: #3C3C3C;
		color: #000;
		overflow: hidden;
}
.top_service_section_inner {
		max-width: 1180px;
		margin: 0 auto;
		padding: 0 60px;
}
.top_service_section .section_title {
		color: #fff;
}
.top_service_section .section_title_en a {
		color: #fff;
}
/* GROUP（3子会社）専用調整 */
.top_service_section .service_slider {
		padding: 0 30px; /* 左右に余白（カードが端に張り付かないように） */
}
.top_service_section .top_service_item_hdr {
		align-items: stretch; /* ロゴ枠を右の見出しボックスと同じ高さに */
}
.top_service_section .top_service_item_hdr_thumb {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 6px 12px; /* 上下6px・左右12px */
		box-sizing: border-box;
		border: none; /* 枠線なし */
		background: #fff;
}
.top_service_section .top_service_item_hdr_thumb img {
		border: none; /* imgの枠は撤去（箱側に移した） */
		width: 100%;
		height: auto;
		max-height: 100%;
		object-fit: contain;
}
/* MONKEY TECH：ホバーでターミナル/コードエディタ風に変化（1s） */
.top_service_section .top_service_item.is-tech,
.top_service_section .top_service_item.is-tech h6,
.top_service_section .top_service_item.is-tech .top_service_item_hdr p,
.top_service_section .top_service_item.is-tech .top_service_item_caption,
.top_service_section .top_service_item.is-tech .top_service_item_caption p,
.top_service_section .top_service_item.is-tech .top_service_item_hdr_thumb,
.top_service_section .top_service_item.is-tech .top_service_item_hdr_thumb img {
		transition: background-color 1s ease, color 1s ease, filter 1s ease;
}
/* SCREECH：ホバーで通電（ライフライン＝暗転してから電気が灯る） */
.top_service_section .top_service_item.is-screech,
.top_service_section .top_service_item.is-screech h6,
.top_service_section .top_service_item.is-screech .top_service_item_hdr p,
.top_service_section .top_service_item.is-screech .top_service_item_caption,
.top_service_section .top_service_item.is-screech .top_service_item_caption p,
.top_service_section .top_service_item.is-screech .top_service_item_hdr_thumb,
.top_service_section .top_service_item.is-screech .top_service_item_hdr_thumb img {
		transition: background-color 0.6s ease, color 0.6s ease, filter 0.6s ease, text-shadow 0.6s ease;
}
/* BABOON Lab：ホバーでInstagram風フィードに（UIパーツは全てabsoluteオーバーレイ＝リフローなし） */
.top_service_section .top_service_item.is-bab {
		position: relative;
		transition: background-color 0.45s ease;
}
.top_service_section .top_service_item.is-bab h6,
.top_service_section .top_service_item.is-bab .top_service_item_hdr p,
.top_service_section .top_service_item.is-bab .top_service_item_caption p,
.top_service_section .top_service_item.is-bab .top_service_item_hdr_thumb,
.top_service_section .top_service_item.is-bab .top_service_item_hdr_thumb img {
		transition: color 0.45s ease, background 0.45s ease, filter 0.45s ease;
}
/* 右上の「・・・」メニュー（ホバーでフェードイン） */
.top_service_section .top_service_item.is-bab::before {
		content: '・・・';
		position: absolute;
		top: 30px;
		right: 34px;
		font-size: 17px;
		letter-spacing: 1px;
		color: #262626;
		opacity: 0;
		transition: opacity 0.45s ease;
		pointer-events: none;
		z-index: 3;
}
/* 下部のアクションバー（実要素＝ハート・いいね数・コメント・シェア） */
.top_service_section .top_service_item.is-bab .bab_actions {
		position: absolute;
		left: 40px;
		bottom: 24px;
		display: flex;
		align-items: center;
		gap: 16px;
		font-size: 13px;
		letter-spacing: 0.5px;
		color: #262626;
		opacity: 0;
		transform: translateY(6px);
		transition: opacity 0.45s ease, transform 0.45s ease;
		pointer-events: none;
		z-index: 3;
}
.top_service_section .top_service_item.is-bab .bab_like {
		display: inline-flex;
		align-items: center;
		gap: 5px;
}
.top_service_section .top_service_item.is-bab .bab_heart {
		font-style: normal;
		display: inline-block;
		transform-origin: center 70%;
}
.top_service_section .top_service_item.is-bab .bab_cmt,
.top_service_section .top_service_item.is-bab .bab_share {
		font-style: normal;
}
/* いいね数のカウントロール（1,240→1,241を縦スライド） */
.top_service_section .top_service_item.is-bab .bab_count {
		display: inline-block;
		height: 1.4em;
		line-height: 1.4em;
		overflow: hidden;
}
.top_service_section .top_service_item.is-bab .bab_count_roll {
		display: block;
		transition: transform 0.35s cubic-bezier(0.34, 1.45, 0.64, 1);
		transition-delay: 0.45s; /* 1次完了後に回る */
}
.top_service_section .top_service_item.is-bab .bab_count_roll span {
		display: block;
		height: 1.4em;
		line-height: 1.4em;
}
/* GROUP：カード右下の丸＋矢印（リンク合図）。ホバーで色反転＋矢印が走る */
.top_service_section .top_service_item {
		position: relative; /* 矢印の配置基準（全カード共通で保証） */
		height: 100%; /* スライド枠を満たす＝全カード同じ高さ(最長カードに揃う) */
}
.top_service_section .swiper-slide {
		height: auto; /* Swiper既定の100%を解除→flex stretchで全スライドが最長に揃う */
		transition: opacity 0.3s ease;
}
/* GROUP：ホバー演出は「swiper-slide自体のopacity下げ＋矢印の動き」だけに簡素化（子会社ごとの派手な演出は撤去 2026-07-30） */
@media (hover: hover) {
		.top_service_section .swiper-slide:hover {
				opacity: 0.7;
		}
}
.top_service_section .group_arrow {
		position: absolute;
		right: 15px;
		bottom: 15px;
		width: 25px;
		height: 25px;
		border-radius: 50%;
		background: #c2153e; /* 通常＝赤丸 */
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		box-sizing: border-box;
		transition: background-color 0.45s ease, box-shadow 0.45s ease;
		z-index: 4;
		pointer-events: none;
}
.top_service_section .group_arrow_ico {
		width: 10px;
		height: 10px;
		background-color: #fff; /* 通常＝白矢印（画像をmask化して色指定できるように） */
		-webkit-mask: url("../images/link_arrow_S.png") no-repeat center center;
		mask: url("../images/link_arrow_S.png") no-repeat center center;
		-webkit-mask-size: contain;
		mask-size: contain;
		transition: background-color 0.45s ease;
}
@media (hover: hover) {
		.top_service_section .top_service_item:hover .group_arrow {
				background: #fff; /* 反転＝白丸 */
				box-shadow: 0 0 0 1px rgba(0,0,0,0.08); /* 薄い背景でも輪郭を保つ */
		}
		.top_service_section .top_service_item:hover .group_arrow_ico {
				background-color: #c2153e; /* 反転＝赤矢印 */
				animation: arrowRight 0.45s linear forwards;
		}
}
/* PCは3枚固定表示でスワイプ不要＝pagination/カウンター非表示。SPはスワイプするので残す */
@media (min-width: 768px) {
		.top_service_section .swiper-pagination,
		.top_service_section .countWrap {
				display: none;
		}
}
/* ================ */