/**
 * フロントページとヘッダーを、元の BIP テーマの見た目に戻す。
 */

body.home {
	background-color: #98c6d9;
}

#masthead.bip-header {
	--c-prime: #c52727;
	--c-sub: #1f192e;
	--c-action: #2fe6a3;
	--c-txt-prime: #2f2f2f;
	--c-txt-reverse: #ffffff;
	--c-base-prime: #ffffff;
	--c-base-sub: #e0f7fe;
	--c-base-third: #fffae8;
	--c-modal: rgba(24, 24, 47, 0.85);
	--c-gray: #707070;
	--c-gray-light: rgba(234, 234, 234, 0.8);
	--radius-prime: 6px;
	--radius-small: 4px;
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	width: 100%;
	background: #fff;
	color: var(--c-txt-prime);
	box-shadow: 0 10px 10px -6px rgba(0, 0, 0, 0.2);
	overflow: visible;
	overflow-anchor: none;
	transition: box-shadow 0.28s ease;
}

#masthead.bip-header a {
	color: var(--c-sub);
	text-decoration: none;
}

#masthead.bip-header .main-navigation,
#masthead.bip-header .main-navigation .menu-title,
#masthead.bip-header .main-navigation .menu-subtitle,
#drawer .drawer-menu {
	font-family: "M PLUS Rounded 1c", sans-serif;
}

a,
#masthead.bip-header .main-navigation .menu > li,
#masthead.bip-header .main-navigation .mega-menu,
#masthead.bip-header .main-navigation .mega-menu::before {
	cursor: pointer;
}

#masthead.bip-header .site-id {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	min-width: 0;
    padding-inline: var(--space-xs);
}

#masthead.bip-header .site-id p {
	margin: 0;
}

#masthead.bip-header .site-logo-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
}

#masthead.bip-header .custom-logo-link {
	display: flex;
	align-items: center;
	height: 60px;
	transition: height 0.28s ease;
}

#masthead.bip-header .custom-logo,
#masthead.bip-header .custom-logo-link img {
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: contain;
}

#masthead.bip-header .site-title-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 0.25rem;
	min-width: 0;
	max-height: none;
	overflow: visible;
	padding: 0.5rem 1rem;
	opacity: 1;
	transform: none;
	transition:
		max-height 0.28s ease,
		opacity 0.24s ease,
		padding 0.28s ease,
		margin 0.28s ease;
}

#masthead.bip-header .tagline,
#masthead.bip-header .site-title,
#masthead.bip-header .catchcopy {
	display: inline-block;
	margin: 0;
	max-height: none;
	overflow: visible;
	transform: none;
	opacity: 1;
	white-space: normal;
}

#masthead.bip-header .tagline {
	color: var(--c-txt-prime);
	font-size: 0.85rem;
	font-style: italic;
	font-weight: 400;
}

#masthead.bip-header .tagline span {
	font-size: 0.95rem;
	font-weight: 600;
}

#masthead.bip-header .site-title {
	color: var(--c-prime);
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
}

#masthead.bip-header .site-title a {
	display: inline;
	max-width: none;
	max-height: none;
	overflow: visible;
	color: var(--c-sub);
	white-space: normal;
	text-overflow: clip;
}

#masthead.bip-header .catchcopy {
	color: var(--c-txt-prime);
	font-size: 0.85rem;
}

#masthead.bip-header .site-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	min-width: 0;
	width: 100%;
}

#masthead.bip-header .search-form {
	display: block;
	flex: 1 1 100%;
	width: auto;
	max-width: none;
	margin: 0 0.75rem 0.6rem;
}

#masthead.bip-header .search-form-inner {
	min-height: 2.35rem;
	padding-left: 0.8rem;
}

#masthead.bip-header .search-field {
	width: auto;
	min-width: 0;
	flex: 1 1 auto;
	font-size: 0.82rem;
}

#masthead.bip-header .search-submit {
	width: 2rem;
	height: 2rem;
	min-height: 0;
}

#masthead.bip-header .search-submit:hover,
#masthead.bip-header .search-submit:focus-visible {
	background: var(--color-accent);
	background-color: var(--color-accent);
	color: #fff;
}

#goto_top.goto-top a:hover,
#goto_top.goto-top a:focus-visible {
	background: var(--color-accent);
	background-color: var(--color-accent);
	color: #fff;
}

#masthead.bip-header #main-nav {
	display: none;
}

#masthead.bip-header .nav-toggle {
	position: absolute;
	top: 0.55rem;
	right: 0.65rem;
	z-index: 5;
	display: inline-flex;
}

#masthead.bip-header .site-id {
	padding-right: 3.75rem;
}

#masthead.bip-header .site-cta {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 120;
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	justify-content: center;
	column-gap: 0.5rem;
	width: 100%;
	margin: 0;
	padding: 3px 1rem;
	background: var(--c-sub);
}

#masthead.bip-header .site-cta .cta-menu {
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	justify-content: center;
	column-gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

#masthead.bip-header .site-cta .cta-menu > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#masthead.bip-header .site-cta .cta-menu > li > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 0.25rem;
	height: 100%;
	min-height: 0 !important;
	padding: 0.3rem 0.6rem !important;
	border-radius: var(--radius-small) !important;
	background: var(--c-prime) !important;
	color: #fff !important;
	font-family: var(--font-family-base);
	font-size: 0.65rem !important;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	filter: drop-shadow(4px 4px 0 #a5dbf2);
	box-shadow: none;
	transform: none;
}

#masthead.bip-header .site-cta .cta-menu > li > a::before {
	content: none !important;
	display: none !important;
}

#masthead.bip-header .site-cta .cta-menu > li > a i {
	font-size: 1.7rem;
	line-height: 1;
}

#masthead.bip-header .site-cta .cta-menu > li > a:hover,
#masthead.bip-header .site-cta .cta-menu > li > a:focus-visible {
	background: var(--c-action) !important;
	color: #fff !important;
	opacity: 1;
	transform: none;
}

#masthead.bip-header .breadcrumbs-wrap {
	flex: 1 0 100%;
	width: 100%;
	margin: 0;
	background: var(--color-sidebar-surface);
	color: var(--color-sidebar-link);
	border-top: 1px solid var(--color-sidebar-border);
}

#masthead.bip-header .breadcrumbs {
	display: flex;
	column-gap: 0.5rem;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0.5rem;
	font-size: var(--font-size-s, 0.85rem);
}

#masthead.bip-header .breadcrumbs a {
	color: var(--color-sidebar-link);
}

#masthead.bip-header .breadcrumbs a:hover {
	color: var(--color-sidebar-link-hover);
}

#masthead.bip-header .breadcrumbs a::after {
	background-color: var(--color-sidebar-link-hover);
}

#masthead.bip-header .breadcrumbs .current-item {
	color: var(--color-sidebar-current);
}

/* スクロール後のコンパクトヘッダー。
   開閉の往復は親テーマのしきい値（120px / 24px）で防ぐ。
   sticky 要素自体は transform / will-change しない。 */
#masthead.bip-header.is-compact .custom-logo-link {
	height: 44px;
}

#masthead.bip-header.is-compact .site-logo-wrap {
	padding: 2px;
}

#masthead.bip-header.is-compact .site-title-wrap,
#masthead.bip-header.is-compact .tagline,
#masthead.bip-header.is-compact .site-title,
#masthead.bip-header.is-compact .catchcopy {
	max-height: 0;
	margin: 0;
	padding: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

/* スマホのコンパクトヘッダーは、ロゴ・検索・ハンバーガーを1行に並べる。 */
@media (max-width: 769px) {
	#masthead.bip-header.is-compact {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 0.35rem;
	}

	#masthead.bip-header.is-compact .site-id,
	#masthead.bip-header.is-compact .site-controls {
		display: contents;
	}

	#masthead.bip-header.is-compact .site-logo-wrap {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		width: auto;
		padding-left: 0.35rem;
	}

	#masthead.bip-header.is-compact .site-title-wrap {
		display: none;
	}

	#masthead.bip-header.is-compact .search-form {
		grid-column: 2;
		grid-row: 1;
		width: 100%;
		max-width: none;
		min-width: 0;
		margin: 0;
	}

	#masthead.bip-header.is-compact .nav-toggle {
		position: static;
		grid-column: 3;
		grid-row: 1;
		margin-right: 0.45rem;
	}

	#masthead.bip-header.is-compact .breadcrumbs-wrap {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

body.bip-has-fixed-cta {
	padding-bottom: 4.75rem;
}

@media (max-width: 769px) {
	body {
		padding-bottom: 4.75rem;
	}
}

@media (min-width: 770px) {
	body {
		padding-bottom: 0;
	}

	#masthead.bip-header {
		position: sticky;
		top: 0;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	#masthead.bip-header .site-controls {
		flex-wrap: nowrap;
		width: auto;
		gap: 0.75rem;
	}

	#masthead.bip-header .search-form {
		flex: 0 0 auto;
		width: 16rem;
		max-width: min(100%, 16rem);
		margin: 0;
	}

	#masthead.bip-header .search-field {
		font-size: var(--font-size-s);
	}

	#masthead.bip-header .nav-toggle {
		display: none;
	}

	#masthead.bip-header .site-id {
		padding-right: 0;
	}

	#masthead.bip-header #main-nav,
	#masthead.bip-header .main-navigation {
		display: flex;
		align-items: stretch;
		margin: 0;
		overflow: visible;
	}

	#masthead.bip-header #primary-menu,
	#masthead.bip-header .main-navigation .menu {
		display: flex;
		align-items: stretch;
		flex-wrap: nowrap;
		gap: 0;
		margin: 0;
		padding: 0;
		list-style: none;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		backdrop-filter: none;
	}

	#masthead.bip-header .main-navigation .menu > li {
		position: relative;
		flex-shrink: 0;
		margin: 0;
		padding: 0;
	}

	#masthead.bip-header .main-navigation .menu > li::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0;
		z-index: 2;
		width: 100%;
		height: 2px;
		background-color: var(--c-action);
		transform: translateX(-50%) scaleX(0);
		transform-origin: center;
		transition: transform 0.3s ease;
		pointer-events: none;
	}

	#masthead.bip-header .main-navigation .menu > li:hover::after,
	#masthead.bip-header .main-navigation .menu > li:focus-within::after,
	#masthead.bip-header .main-navigation .menu > li.is-mega-open::after {
		transform: translateX(-50%) scaleX(1);
	}

	#masthead.bip-header .main-navigation .menu > li > a,
	#masthead.bip-header .menu-item-link {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		row-gap: 0.25rem;
		height: 100%;
		min-height: 0;
		margin-right: 0;
		padding: 0.5rem 0.75rem;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--c-sub);
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.3;
		text-align: center;
		white-space: nowrap;
		transition: 0.2s;
	}

	#masthead.bip-header .main-navigation .menu > li > a {
		border-left: 1px solid rgb(31 25 46 / 0.18);
	}

	#masthead.bip-header .main-navigation .menu > li:last-child > a {
		border-right: 1px solid rgb(31 25 46 / 0.18);
	}

	#masthead.bip-header .main-navigation .menu > li > a .menu-title {
		white-space: nowrap;
	}

	#masthead.bip-header .menu-title {
		font-family: "M PLUS Rounded 1c", sans-serif;
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.3;
	}

	#masthead.bip-header .main-navigation .menu > li > a .menu-subtitle {
		display: block;
		font-size: 0.65rem;
		font-weight: 400;
		line-height: 1.2;
		letter-spacing: 0.06em;
		white-space: nowrap;
	}

	#masthead.bip-header.is-compact .main-navigation .menu > li > a .menu-subtitle {
		display: none;
	}

	#masthead.bip-header .main-navigation .menu > .menu-item-has-children > a {
		position: relative;
		padding-right: 0.75rem;
		padding-bottom: 1.75rem;
	}

	#masthead.bip-header.is-compact .main-navigation .menu > .menu-item-has-children > a {
		padding-bottom: 1.45rem;
	}

	#masthead.bip-header .main-navigation .menu > .menu-item-has-children > a::before,
	#masthead.bip-header .main-navigation .menu > .menu-item-has-children > a::after {
		content: "˅";
		position: absolute;
		top: auto;
		right: auto;
		bottom: 0.2rem;
		left: 50%;
		width: auto;
		height: auto;
		border: 0;
		background: none;
		transform: translateX(-50%);
		opacity: 1;
		font-size: 0.75rem;
		line-height: 1;
	}

	#masthead.bip-header .main-navigation .menu > .menu-item-has-children:hover > a::before,
	#masthead.bip-header .main-navigation .menu > .menu-item-has-children:hover > a::after,
	#masthead.bip-header .main-navigation .menu > .menu-item-has-children:focus-within > a::before {
		content: none;
	}

	#masthead.bip-header .main-navigation li a::before {
		background: none;
	}

	#masthead.bip-header .main-navigation .menu > li > a::after {
		content: none;
	}

	#masthead.bip-header .main-navigation .menu > li > a:hover,
	#masthead.bip-header .main-navigation .menu > li:hover > a,
	#masthead.bip-header .menu-title:hover {
		color: var(--c-action);
		opacity: 1;
	}

	#masthead.bip-header .main-navigation .mega-menu,
	#masthead.bip-header .main-navigation .menu > li > .mega-menu {
		position: fixed;
		top: var(--bip-header-offset, 97px);
		right: 50%;
		left: auto;
		z-index: 130;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 1rem;
		width: 96vw;
		min-width: 0;
		max-width: none;
		margin: 0;
		padding: 1rem;
		list-style: none;
		border: 0;
		border-radius: var(--radius-prime);
		background: var(--c-modal);
		box-shadow: none;
		backdrop-filter: none;
		opacity: 0;
		visibility: hidden;
		transform: translateX(50%);
		pointer-events: none;
		transition: opacity 0.2s ease;
	}

	/* 親項目とパネルのすき間でもホバーが切れないようにする */
	#masthead.bip-header .main-navigation .menu > li > .mega-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -2.5rem;
		height: 2.5rem;
		display: block;
	}

	#masthead.bip-header .main-navigation .menu > li:hover > .mega-menu,
	#masthead.bip-header .main-navigation .menu > li:focus-within > .mega-menu,
	#masthead.bip-header .main-navigation .menu > li.is-mega-open > .mega-menu {
		opacity: 1;
		visibility: visible;
		transform: translateX(50%);
		pointer-events: auto;
	}

	#masthead.bip-header .mega-menu .menu-item-link,
	#masthead.bip-header .main-navigation .mega-menu a {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 0;
		padding: 0.5rem;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: #fff;
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.4;
		text-align: center;
		white-space: normal;
		transition: color 0.2s;
	}

	#masthead.bip-header .mega-menu .menu-title {
		color: #fff;
		font-size: 1rem;
		font-weight: 700;
	}

	#masthead.bip-header .mega-menu > li {
		position: relative;
	}

	#masthead.bip-header .mega-menu > li::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0;
		z-index: 2;
		width: 100%;
		height: 2px;
		background-color: var(--c-action);
		transform: translateX(-50%) scaleX(0);
		transform-origin: center;
		transition: transform 0.3s ease;
		pointer-events: none;
	}

	#masthead.bip-header .mega-menu > li:hover::after,
	#masthead.bip-header .mega-menu > li:focus-within::after {
		transform: translateX(-50%) scaleX(1);
	}

	#masthead.bip-header .mega-menu > li:hover > .menu-item-link,
	#masthead.bip-header .mega-menu > li:focus-within > .menu-item-link,
	#masthead.bip-header .mega-menu > li:hover > .menu-item-link .menu-title,
	#masthead.bip-header .mega-menu > li:focus-within > .menu-item-link .menu-title {
		color: var(--c-action);
	}

	#masthead.bip-header .site-cta {
		position: static;
		display: grid;
		width: auto;
		padding: 1rem 1.5rem;
		border-radius: 60px;
		background: transparent;
	}

	#masthead.bip-header .site-cta .cta-menu > li > a {
		padding-top: 0.7rem !important;
		padding-bottom: 0.7rem !important;
	}

	#masthead.bip-header.is-compact .main-navigation .menu > li > a {
		padding-top: 0.35rem;
		padding-bottom: 0.35rem;
	}

	#masthead.bip-header.is-compact .site-cta {
		padding: 0.45rem 0.75rem;
	}

	#masthead.bip-header.is-compact .site-cta .cta-menu > li > a {
		padding: 0.2rem 0.45rem !important;
	}

	#masthead.bip-header.is-compact .site-cta .cta-menu > li > a i {
		font-size: 1.25rem;
	}
}

/* フロントページ
--------------------------------------------- */
.front-page-wrap {
	--c-prime: #c52727;
	--c-sub: #1f192e;
	--c-action: #2fe6a3;
	--c-txt-prime: #2f2f2f;
	--c-txt-reverse: #ffffff;
	--c-base-prime: #ffffff;
	--c-base-third: #fffae8;
	--c-gray: #707070;
	--c-gray-light: rgba(234, 234, 234, 0.8);
	--radius-prime: 6px;
	--radius-small: 4px;
	display: flex;
	flex-direction: column;
	position: relative;
	isolation: isolate;
	color: var(--c-txt-prime);
}

.front-page-wrap h2 {
	margin-bottom: 2rem;
	color: var(--c-sub);
	font-size: 1.3rem;
	text-align: center;
}

.front-page-wrap .cont-limited {
	width: min(100% - 2rem, 1440px);
	margin-inline: auto;
}

.firstview-area {
	--firstview-blue: #8dc8dc;
	position: sticky;
	top: var(--bip-header-offset, 6.0625rem);
	z-index: -1;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	height: calc(100vh - var(--bip-header-offset, 6.0625rem));
	height: calc(100svh - var(--bip-header-offset, 6.0625rem));
	padding-top: 1rem;
	overflow: hidden;
	background-color: var(--firstview-blue);
}

.firstview-visual {
	display: flex;
	flex: 1 1 auto;
	align-items: flex-start;
	min-height: 0;
	overflow: hidden;
}

.firstview-area video {
	display: block;
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: cover;
	object-position: center top;
	background-color: var(--firstview-blue);
	/* 右端数pxだけ色が違うので、画面外へ出して隠す。 */
	transform: scaleX(1.004);
	transform-origin: left center;
}

.firstview-catch {
	flex: 0 0 auto;
	min-height: 1.3em;
	margin: 0;
	padding: 1.25rem 1rem 3.25rem;
	color: #1e3f63;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-size: clamp(1.35rem, 3.4vw, 3.25rem);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.firstview-caret {
	display: inline-block;
	width: 0.07em;
	height: 0.95em;
	margin-left: 0.12em;
	background: currentColor;
	vertical-align: -0.08em;
	animation: firstview-caret 0.85s steps(1) infinite;
}

@keyframes firstview-caret {
	50% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.firstview-caret {
		display: none;
	}
}

@media (max-width: 769px) {
	.firstview-area {
		height: calc(100vh - var(--bip-header-offset, 9rem) - 4.75rem);
		height: calc(100svh - var(--bip-header-offset, 9rem) - 4.75rem);
	}

	.firstview-catch {
		padding: 1rem 1rem 2.25rem;
	}
}

.headline-area {
	position: relative;
	z-index: 1;
	width: min(calc(100% - 2rem), 1200px);
	margin: 1rem auto 2rem;
	padding: 0 1rem 1rem;
	border-radius: var(--radius-prime);
	background: var(--c-gray-light);
}

.post-top-header {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 0.5rem;
	margin: 1rem 0 0;
	color: var(--c-sub);
	font-size: 1.3rem;
}

.post-top-header i,
.top-area-01 i {
	padding-right: 0.5rem;
	color: var(--c-prime);
}

.top-area-01 .top-contents-link i {
	padding-right: 0;
	color: inherit;
}

.post-top {
	margin: -1rem auto 0;
	padding: 1rem;
	border-radius: var(--radius-prime);
	background: #fff;
}

.news-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.35rem;
	margin: 0 0 0.75rem;
	border-bottom: 2px solid #e6e6e6;
}

.news-filter button {
	--tab-color: var(--c-prime);
	position: relative;
	margin: 0 0 0.4rem;
	padding: 0.2rem 0.55rem;
	border: none;
	border-radius: var(--radius-small);
	background: var(--tab-color);
	color: #fff;
	font-family: inherit;
	font-size: 0.85rem;
	line-height: 1.4;
	cursor: pointer;
}

.news-filter button[data-category="all"] {
	--tab-color: #5c6570;
}

.news-filter button.csr {
	--tab-color: #e98415;
}

.news-filter button.seminar {
	--tab-color: #55a4f3;
}

.news-filter button.works,
.news-filter button.cloud {
	--tab-color: #039074;
}

.news-filter button:hover {
	filter: brightness(1.08);
}

.news-filter button[aria-selected="true"] {
	z-index: 1;
	margin-bottom: -2px;
	padding: 0.35rem 0.85rem calc(0.4rem + 2px);
	border-radius: var(--radius-small) var(--radius-small) 0 0;
	background: var(--tab-color);
	color: #fff;
}

.news-filter button[aria-selected="true"]:hover {
	filter: none;
}

.news-filter button:focus-visible {
	outline: 2px solid var(--tab-color);
	outline-offset: 2px;
}

.news-filter-empty {
	margin: 0.5rem 0 0;
	color: var(--c-sub);
	text-align: center;
}

.post-top ul {
	max-height: 16rem;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.post-top ul li[hidden] {
	display: none;
}

.post-top ul li {
	display: grid;
	grid-template-columns: 7rem 1fr;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px dotted var(--c-gray);
}

.category-name {
	grid-area: 1 / 1 / 2 / 2;
	margin-right: 0.5rem;
	padding: 0.1rem 0.2rem;
	border-radius: var(--radius-small);
	background: var(--c-prime);
	color: #fff;
	font-size: 0.85rem;
	text-align: center;
}

.category-name.csr {
	background: #e98415;
}

.category-name.seminar {
	background: #55a4f3;
}

.category-name.works,
.category-name.cloud {
	background: #039074;
}

.post-top-date {
	grid-area: 2 / 1 / 3 / 2;
	font-size: 0.85rem;
	text-align: center;
}

.post-top-title {
	grid-area: 1 / 2 / 3 / 3;
	display: flex;
	align-items: center;
	column-gap: 0.5rem;
	color: var(--c-sub);
	font-size: 1rem;
	text-decoration: none;
}

.circle-shadow {
	position: relative;
}

.circle-shadow::after {
	content: "";
	position: absolute;
	bottom: -1rem;
	left: 50%;
	display: block;
	width: 2rem;
	height: 0.4rem;
	border-radius: 50%;
	background: #e0e0e0;
	transform: translateX(-50%);
}

.top-area-01 {
	position: relative;
	z-index: 1;
	padding: 2rem 0;
	background: var(--c-gray-light);
}

.top-area-01 > .cont-limited {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1rem;
	width: min(100% - 2rem, 1440px);
}

.top-consultation,
.top-access {
	position: relative;
	padding: 2.25rem 1rem 5.5rem;
	border-radius: var(--radius-prime);
	background: #fff;
	text-align: left;
}

.top-consultation {
	padding-bottom: 9.25rem;
}

.top-area-01 table {
	width: 100%;
	border-collapse: collapse;
}

.top-area-01 table th,
.top-area-01 table td {
	padding: 0.5rem;
	border: 1px solid var(--c-gray-light);
}

.top-area-01 table th {
	background: var(--c-base-third);
	color: var(--c-sub);
	text-align: center;
}

.top-contents-img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.top-contents-link {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	display: block;
	width: calc(100% - 2rem);
	margin: 0;
	padding: 0.5rem 1rem;
	border-radius: var(--radius-small);
	background: var(--c-prime);
	color: #fff;
	font-weight: 700;
	text-align: center;
	filter: drop-shadow(4px 4px 0 #a5dbf2);
	transform: translateX(-50%);
	transition: 0.2s;
}

.top-contents-link a {
	color: #fff;
	font-family: var(--font-family-base);
	text-decoration: none;
}

.top-contents-link:hover {
	background: var(--c-action);
}

.top-area-02 {
	--photo-blue: #b9e4f2;
	position: relative;
	z-index: 1;
	isolation: isolate;
	overflow: clip;
	background-color: var(--photo-blue);
	text-align: center;
}

.top-area-02-bg {
	position: sticky;
	top: 0;
	z-index: -1;
	height: 0;
	pointer-events: none;
}

.top-area-02-bg::after {
	content: "";
	position: absolute;
	top: 42vh;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 28vh;
	background: linear-gradient(to bottom, rgb(185 228 242 / 0), var(--photo-blue));
	pointer-events: none;
}

.top-area-02-bg img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 70vh;
	object-fit: cover;
}

.top-area-02-inner {
	position: relative;
	z-index: 1;
	padding-bottom: 8.75rem;
}

.top-area-02 .top-contents-4col {
	display: block;
}

.top-area-02 .card-grid {
	width: 100%;
	margin-inline: 0;
	padding-inline: 0;
	text-align: left;
}

.top-area-02 .archive-card__title {
	text-align: left;
}

.card-grid > .archive-card:hover .archive-card__more.btn-primary {
	background: var(--color-accent) !important;
	background-color: var(--color-accent) !important;
	color: #fff !important;
}

.archive-list-item__link:hover .archive-list-item__more.icon-arrow-fill::after {
	background-color: var(--color-accent);
	color: #fff;
}

.top-area-02-logo .custom-logo-link {
	display: inline-flex;
	height: 72px;
	margin-top: 3rem;
}

.top-area-02-logo img {
	height: 100%;
	width: auto;
}

.screen-back {
	padding: 2rem;
	background: rgba(255, 255, 255, 0.8);
}

.top-contents-4col,
.top-contents-3col {
	display: grid;
	gap: 1rem;
	width: min(100% - 2rem, 1440px);
	margin: 0 auto;
	padding: 2rem 0 0;
}

.top-contents-4col {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.top-contents-3col {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.top-contents-4col .top-contents-item {
	position: relative;
	padding: 1rem 1rem 4.5rem;
	border-radius: var(--radius-prime);
	background: #fff;
	transition: transform 0.3s ease;
}

.top-contents-4col .top-contents-item:hover {
	transform: scale(1.05);
}

.top-contents-item h3 {
	margin: 0;
	padding: 0.5rem 0;
	color: var(--c-sub);
	font-size: 1rem;
}

.btn-page-transition {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	display: inline-block;
	padding: 0.2rem 1.6rem 0.2rem 1rem;
	border-radius: 9999px;
	background: var(--c-sub);
	font-size: 0.85rem;
	transform: translateX(-50%);
}

.btn-page-transition a {
	color: #fff;
	text-decoration: none;
}

.btn-page-transition a::after {
	content: "›";
	margin-left: 0.35rem;
}

.top-area-product {
	position: relative;
	z-index: 1;
	padding: 2rem 0;
	background: #fff;
}

.top-area-product .cont-limited {
	position: relative;
	padding-bottom: 8.75rem;
}

.top-area-lead {
	margin: 0;
	text-align: center;
}

.products-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: 20px;
	align-items: center;
	padding: 32px 16px 0;
}

.products-item {
	display: block;
}

.products-item img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.6s;
}

.products-item img:hover {
	transform: scale(1.1);
}

.top-area-03 {
	position: relative;
	z-index: 1;
	padding: 2rem 0 1rem;
	background: #eaeaea;
}

.top-area-03-inner {
	position: relative;
	padding-bottom: 8.75rem;
}

@media (max-width: 767px) {
	.top-area-03-inner {
		padding-bottom: 11.25rem;
	}
}

.top-contents-3col .top-contents-item {
	position: relative;
	background: #fff;
}

.top-contents-3col .top-contents-link {
	bottom: 1rem;
	width: calc(100% - 0.5rem);
	padding: 0.5rem 0.15rem;
}

.top-contents-link-section {
	position: absolute;
}

.top-consultation > .top-contents-link,
.top-area-02-inner > .top-contents-link,
.top-area-product .cont-limited > .top-contents-link,
.top-contents-link-section {
	padding: 0;
}

.top-consultation > .top-contents-link a,
.top-area-02-inner > .top-contents-link a,
.top-area-product .cont-limited > .top-contents-link a,
.top-contents-link-section a {
	display: block;
	padding: 1.9rem 1.5rem;
}

#colophon.site-footer .site-title {
	margin-top: 0.45rem;
}

#colophon.site-footer .custom-logo {
	height: calc(78px * 0.8);
	width: auto;
}

#colophon.site-footer .footer-map-address {
	margin-top: var(--space-m);
	padding: var(--space-xxs);
	background: var(--color-footer-surface);
	border: 1px solid var(--color-footer-border);
	border-radius: var(--radius-m);
}

#colophon.site-footer .footer-map-address .widget {
	margin: 0;
	background: transparent;
	color: var(--color-footer-text);
}

#colophon.site-footer .footer-map-address p {
	font-size: var(--font-size-s);
	line-height: var(--line-height-relaxed);
	color: var(--color-footer-text-muted);
}

#colophon.site-footer .footer-description {
	margin: 0 0 1.5rem;
	color: var(--color-footer-text-muted);
	font-size: var(--font-size-s);
	line-height: 1.7;
}

/* フッター（PC）。情報は左、メニューは右。認証マークは小さめ。 */
@media (min-width: 768px) {
	#colophon.site-footer .site-footer-main {
		flex-wrap: nowrap;
		align-items: flex-start;
	}

	#colophon.site-footer .site-footer-info {
		flex: 0 1 34rem;
		min-width: 16rem;
	}

	#colophon.site-footer .site-footer-nav {
		flex: 1 1 0;
		min-width: 0;
	}

	#colophon.site-footer .footer-widgets .wp-block-image {
		width: 16rem;
		max-width: 100%;
		margin: 0;
	}

	#colophon.site-footer .footer-widgets .wp-block-image img {
		width: 100%;
		height: auto;
	}
}

/* フッターメニュー。CTAは出さず、幅があるときは3列に分ける。 */
#colophon.site-footer .site-footer-nav {
	display: block;
	container-type: inline-size;
	container-name: footer-nav;
}

#colophon.site-footer .footer-menu-board {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

#colophon.site-footer .footer-menu-col-primary {
	display: contents;
}

#colophon.site-footer .footer-menu-service {
	order: 1;
}

#colophon.site-footer .footer-menu-col-products {
	order: 2;
}

#colophon.site-footer .footer-menu-col-about {
	order: 3;
}

#colophon.site-footer .footer-nav-sub {
	order: 4;
}

#colophon.site-footer .footer-menu > li > a {
	font-weight: var(--font-weight-bold);
}

@container footer-nav (min-width: 40rem) {
	#colophon.site-footer .footer-menu-board {
		display: grid;
		grid-template-columns: 10.5rem minmax(0, 1fr) 12.75rem;
		column-gap: 1.5rem;
		align-items: start;
	}

	#colophon.site-footer .footer-menu-col-primary {
		display: flex;
		flex-direction: column;
		gap: 1.75rem;
		order: 0;
		min-width: 0;
	}

	#colophon.site-footer .footer-menu-service,
	#colophon.site-footer .footer-menu-col-products,
	#colophon.site-footer .footer-menu-col-about,
	#colophon.site-footer .footer-nav-sub {
		order: 0;
		min-width: 0;
	}

	#colophon.site-footer .footer-menu-col-products .sub-menu {
		columns: 2;
		column-gap: 1.25rem;
	}

	#colophon.site-footer .footer-menu-col-products .sub-menu li,
	#colophon.site-footer .footer-menu-col-about .sub-menu li {
		margin-left: 0;
		break-inside: avoid;
	}

	#colophon.site-footer .footer-menu .sub-menu a {
		text-wrap: pretty;
	}
}

/* サイドバーはヘッダー直下に留まり、画面下まで伸ばす。 */
@media (min-width: 768px) {
	.site-content.has-sidebar {
		align-items: start;
	}

	.site-content.has-sidebar .site-sidebar {
		--bip-sidebar-top: var(--sidebar-sticky-offset, calc(var(--bip-header-offset, var(--header-height)) + var(--space-s)));
		display: flex;
		flex-direction: column;
		align-self: start;
		position: sticky;
		top: var(--bip-sidebar-top);
		height: calc(100vh - var(--bip-sidebar-top) - var(--space-s));
		height: calc(100svh - var(--bip-sidebar-top) - var(--space-s));
		max-height: calc(100vh - var(--bip-sidebar-top) - var(--space-s));
		max-height: calc(100svh - var(--bip-sidebar-top) - var(--space-s));
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.site-content.has-sidebar .site-sidebar > .widget:last-child {
		flex: 1 1 auto;
	}

	.site-content.has-sidebar .category-posts-list-wrap {
		max-height: none;
	}
}

/* フッターCTAのボタンは、フロントのセクションボタンに合わせる。
   親の :is() が詳細度を上げているので、こちらもクラスを重ねて勝つ。 */
.footer-cta {
	--c-prime: #c52727;
	--c-action: #2fe6a3;
	--radius-small: 4px;
}

.footer-cta nav.footer-cta__nav {
	width: min(100%, 40rem);
	max-width: 40rem;
	margin-inline: auto;
}

.footer-cta .footer-cta-menu {
	gap: 1rem;
}

.footer-cta nav.footer-cta__nav .footer-cta-menu > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 0 !important;
	padding: 1.4rem 1.5rem !important;
	line-height: 1.7;
	border-radius: var(--radius-small) !important;
	background: var(--c-prime) !important;
	background-color: var(--c-prime) !important;
	color: #fff !important;
	box-shadow: none !important;
	filter: drop-shadow(4px 4px 0 #a5dbf2);
	white-space: normal;
	transform: none;
}

.footer-cta nav.footer-cta__nav .footer-cta-menu > li > a::before {
	content: none !important;
	display: none !important;
}

.footer-cta nav.footer-cta__nav .footer-cta-menu > li > a i {
	flex: 0 0 auto;
	color: inherit;
	font-size: 1.15em;
	line-height: 1;
}

.footer-cta nav.footer-cta__nav .footer-cta-menu > li > a:hover,
.footer-cta nav.footer-cta__nav .footer-cta-menu > li > a:focus-visible {
	background: var(--c-action) !important;
	background-color: var(--c-action) !important;
	color: #fff !important;
	box-shadow: none !important;
	transform: none;
}

/* 親ページに並べる子ページ見出しのリンク下線だけ消す。
   本文リンクの :not() が詳細度を上げているので、同じだけ重ねる。 */
.entry-content .child-pages-list > li > h2 > a:not(.wp-block-button__link) {
	text-decoration: none;
}

/* 製品詳細のアイキャッチは、タイトル下の本文幅の中央に収める。
   本文中の同じ画像は高さ固定で切れるので出さない。 */
.single-products .entry-featured-image {
	display: flex;
	justify-content: center;
	width: min(100%, var(--container-width-prose, 52rem));
	margin-inline: auto;
	margin-bottom: 2rem;
}

.single-products .entry-featured-image img {
	width: auto;
	max-width: min(100%, 20rem);
	height: auto;
	max-height: 8.75rem;
	object-fit: contain;
	border-radius: 0;
}

.single-products .entry-content .wp-block-post-featured-image {
	display: none;
}

/* 製品詳細の箇条書きはボードとして並べる。番号は番号付きリストだけ。 */
.single-products .entry-content :is(ul, ol).wp-block-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
	gap: 1rem 0.9rem;
	margin: 1.75rem 0 2.5rem;
	padding: 0;
	list-style: none;
}

.single-products .entry-content ol.wp-block-list {
	counter-reset: product-board;
}

.single-products .entry-content :is(ul, ol).wp-block-list > li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 0;
	padding: 1.15rem 1.05rem 1.25rem;
	border: 1px solid #d7ebf3;
	border-radius: 10px;
	background: #fff;
	box-shadow: 6px 6px 0 #c5e4f2;
	font-weight: 700;
	line-height: 1.55;
	list-style: none;
}

.single-products .entry-content ul.wp-block-list > li::marker,
.single-products .entry-content ul.wp-block-list > li::before {
	content: none;
}

.single-products .entry-content ol.wp-block-list > li {
	counter-increment: product-board;
}

.single-products .entry-content ol.wp-block-list > li::before {
	content: counter(product-board, decimal-leading-zero);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.1rem;
	height: 2.1rem;
	padding: 0 0.35rem;
	border-radius: 8px;
	background: var(--color-main, #1e3f63);
	color: #fff;
	font-family: Nunito, "M PLUS Rounded 1c", sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
}

/* 取扱製品アーカイブは、アイキャッチを主役にしたカード */
.products-archive .products-category + .products-category {
	margin-top: 2.75rem;
}

.products-archive .products-category__title {
	margin: 0 0 1rem;
	padding-bottom: 0.45rem;
	border-bottom: 2px solid var(--color-main-soft);
	color: var(--color-main);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
}

.products-archive .products-card-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
}

.products-archive .products-card {
	margin: 0;
	background: #fff;
	border: 1px solid var(--color-main-soft);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(31, 25, 46, 0.06);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.products-archive .products-card:hover {
	transform: translateY(-3px);
	border-color: var(--color-accent);
	box-shadow: 0 14px 32px rgba(31, 25, 46, 0.1);
}

.products-archive .products-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--color-main);
	text-decoration: none;
}

.products-archive .products-card__link:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: -3px;
}

.products-archive .products-card__image {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	margin: 0;
	min-height: 12rem;
	padding: 1.5rem 1.25rem 1rem;
	background: #fff;
}

.products-archive .products-card__image img {
	width: 100%;
	height: 8.5rem;
	object-fit: contain;
	object-position: center;
}

.products-archive .products-card__noimage {
	color: var(--color-text-sub, #777);
	font-size: 0.9rem;
}

.products-archive .products-card__title {
	margin: 0;
	padding: 0.85rem 0.75rem 1.1rem;
	border-top: 1px solid var(--color-main-soft);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
}

.products-archive .products-archive-empty {
	margin: 2rem 0;
	text-align: center;
}

@media (max-width: 1024px) {
	.products-archive .products-card-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.products-archive .products-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 製品詳細のサイドバー。カテゴリー名の下に、その製品を並べる。 */
.products-sidebar__group + .products-sidebar__group {
	margin-top: 1.15rem;
}

.site-sidebar .products-sidebar .products-sidebar__category {
	margin: 0 0 0.35rem;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
	color: var(--color-sidebar-heading, var(--color-main));
}

.site-sidebar .products-sidebar .products-sidebar__category a {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
	color: inherit;
}

.products-sidebar .category-posts-list > li {
	margin-bottom: 0.35rem;
	padding-bottom: 0.35rem;
}

/* 前後リンク。左が並び順の手前、右が次。製品詳細と、同じ親を持つ固定ページ。 */
.single-products .post-navigation .nav-links,
.page .page-sibling-navigation .nav-links {
	display: block;
	padding: var(--space-m);
	background: var(--color-sidebar-surface);
	border: 1px solid var(--color-sidebar-border);
	border-radius: var(--radius-m);
	box-shadow: 0 10px 28px rgba(29, 28, 82, 0.04);
}

.single-products .post-navigation-list,
.page .page-sibling-navigation .post-navigation-list {
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.5rem;
}

.single-products .post-navigation-list > li,
.page .page-sibling-navigation .post-navigation-list > li {
	flex: 1 1 0;
	margin: 0;
	padding: 0;
	border-bottom: none;
}

.single-products .post-navigation .nav-previous,
.page .page-sibling-navigation .nav-previous {
	text-align: left;
}

.single-products .post-navigation .nav-next,
.page .page-sibling-navigation .nav-next {
	margin-left: auto;
	text-align: right;
}

/* 検索件数は中央寄せにして、見出しと一覧のあいだに余白を足す。 */
.search-page .archive-description {
	margin-top: 2.25rem;
	margin-bottom: 2rem;
	text-align: center;
}

.search-page .archive-description p {
	margin: 0;
	text-align: center;
}

/* 検索結果は投稿日時を出さない。カテゴリー名は1行、ない項目は左の空き列を畳む。 */
.search-page .archive-list-item__link:has(.archive-list-item__meta) {
	grid-template-columns: auto minmax(0, 1fr) auto;
}

.search-page .archive-list-item__meta .entry-label {
	white-space: nowrap;
}

/* 全角6文字（夢絵コンテスト）が1行に収まる列幅。文字サイズは親テーマのまま。 */
.entry-label {
	white-space: nowrap;
}

.entry-heading,
.archive-heading {
	grid-template-columns: max-content auto minmax(0, 1fr);
}

.archive-heading:not(:has(.archive-heading__divider)) {
	grid-template-columns: minmax(0, 1fr);
}

.front-news-item__header {
	grid-template-columns: max-content minmax(0, 1fr);
}

.archive-list-item__link,
.site-content.has-sidebar .archive-list-item__link {
	grid-template-columns: max-content minmax(0, 1fr) auto;
}

@media (max-width: 767px) {
	.archive-heading {
		grid-template-columns: max-content auto minmax(0, 1fr);
	}

	.archive-heading:not(:has(.archive-heading__divider)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.archive-list-item__link,
	.site-content.has-sidebar .archive-list-item__link {
		grid-template-columns: max-content minmax(0, 1fr);
	}

	.front-news-item__header {
		grid-template-columns: max-content minmax(0, 1fr);
	}
}

.search-page .archive-list-item__link:not(:has(.archive-list-item__meta)) {
	grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 767px) {
	.search-page .archive-list-item__link:has(.archive-list-item__meta) {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.search-page .archive-list-item__link:not(:has(.archive-list-item__meta)) {
		grid-template-columns: minmax(0, 1fr);
	}
}

.inquiry-form {
	display: grid;
	gap: 1.25rem;
	max-width: 40rem;
	margin: 0;
}

.inquiry-form__row {
	display: grid;
	gap: 0.4rem;
	margin: 0;
}

.inquiry-form label {
	font-weight: 700;
}

.inquiry-form__required {
	color: var(--color-button-bg);
	font-size: 0.85em;
	font-weight: 700;
}

.inquiry-form input[type="text"],
.inquiry-form textarea {
	width: 100%;
	padding: 0.7rem 0.8rem;
	border: 1px solid #d7ebf3;
	border-radius: 6px;
	background: #fff;
}

.inquiry-form textarea {
	min-height: 10rem;
	resize: vertical;
}

.inquiry-form__submit {
	margin: 0.5rem 0 0;
}

.inquiry-thanks p {
	margin: 0;
	line-height: 1.8;
}

.inquiry-thanks__back {
	margin-top: 1.75rem;
}

.inquiry-form input[type="submit"] {
	min-width: 8rem;
	padding: 0.8rem 1.5rem;
	border: 0;
	border-radius: 6px;
	background: var(--color-button-bg);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}