@charset "UTF-8";
/*----------
	leading contents
	solution
----------*/
body::before {
	content: "";
	display: block;
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: -1;
	background: #1B9595 url(/english/assets/images/bg-pattern-solution.jpg) no-repeat center/cover;
}
@media (min-width: 768px) {
	body::before {
		background-image: url(/english/assets/images/bg-pattern-solution-pc.jpg);
	}
}

.leading-layer {
	background-color: #1B9595;
	background-image: linear-gradient(135deg, #1b9595, #006565);
}

.solution-category-taglist {
	margin-top: 32px;
}
@media (min-width: 768px) {
	.solution-category-taglist {
		margin-top: 40px;
	}
}

.solution-subtitle {
	margin-bottom: 32px;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: 2rem;
	line-height: var(--line-height-m);
}
@media (min-width: 768px) {
	.solution-subtitle {
		margin-bottom: 40px;
		font-size: 2.8rem;
	}
}

.leading-section:not(.leading-overview) {
	margin-top: 80px;
}
.leading-section:nth-child(2) {
	margin-top: 48px;
}
@media (min-width: 768px) {
	.leading-section:nth-child(2) {
		margin-top: 64px;
	}
}
.leading-section.is-hidden {
	display: none;
}

@media (max-width: 767px) {
	.solution-list > li + li {
		margin-top: 20px;
	}
}
@media (min-width: 768px) {
	.solution-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}
}

/* 横スクロールレイアウト */
@media (min-width: 1280px) and (min-height: 800px) {
	.is-horizontal .leading-content {
		padding-right: 200px;
	}
	.is-horizontal .leading-overview {
		width: 770px;
	}
	.is-horizontal .solution-subtitle {
		writing-mode: horizontal-tb;
	}
	.is-horizontal .leading-section:not(.leading-overview) {
		margin: 0;
		padding-left: 100px;
		padding-right: 0;
	}
	.is-horizontal .solution-list {
		margin: 0;
	}
	.is-horizontal .solution-list > li {
		writing-mode: horizontal-tb;
		width: 560px;
		margin: 0 !important;
	}
	.is-horizontal .solution-list .c-panel-link__text {
		min-height: 3lh;
	}
}
/*# sourceMappingURL=leading-solution.css.map */


.is-hidden {
	display: none;
}

.solution-pickup {
	max-width: 1200px;
	margin: -120px auto 0;
	position: relative;
	z-index: 100;
}
.solution-pickup__title {
	font-family: var(--font-castoro);
	font-size: 2.3rem;
	line-height: var(--line-height-s);
	color: #fff;
}
.solution-pickup__slider {
	margin-top: -32px;
	padding-top: 40px;
}
@media (min-width: 768px) {
	.solution-pickup__slider {
		padding-top: 60px;
	}
}
.solution-pickup__slider-next, .solution-pickup__slider-prev {
	border-color: var(--color-prim);
	position: absolute;
	top: 0;
	right: 0;
	color: var(--color-prim);
}
.solution-pickup__slider-prev {
	left: 0;
}
.solution-pickup__swiper-nav {
	position: relative;
	margin: 40px auto 0;
	height: 40px;
}
.solution-pickup__slider-pagination {
	text-align: center;
}
@media (min-width: 768px) {
	.solution-pickup {
		margin: -210px auto 0;
	}
	.solution-pickup__swiper-nav {
		max-width: 300px;
	}
}

.solution-filter {
	margin: 40px auto 0;
}
@media (min-width: 768px) {
	.solution-filter {
		max-width: 1400px;
		margin: 60px auto 0;
	}
}
.solution-filter .leading-section {
	background-image: url(/assets/images/bg-pattern.jpg);
}
@media (min-width: 768px) {
	.solution-filter .leading-section {
		background-image: url(/assets/images/bg-pattern-pc.jpg);
	}
}
.solution-filter .leading-section .solution-filter-buttons {
	max-width: 1200px;
	margin: auto;
	padding: 60px 20px;
}
@media (min-width: 768px) {
	.solution-filter .leading-section .solution-filter-buttons {
		padding: 50px 0 70px;
	}
}
.solution-filter .leading-section .solution-filter-buttons ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	margin-bottom: 40px;
}
@media (min-width: 768px) {
	.solution-filter .leading-section .solution-filter-buttons ul {
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}
}
.solution-filter .leading-section .solution-filter-buttons ul > li {
	background-color: #fff;
	padding: 1px;
	text-align: center;
	position: relative;
}
.solution-filter .leading-section .solution-filter-buttons ul > li a {
	position: relative;
	z-index: 1;
	background-color: #fff;
	transition: color 0.2s linear;
	padding: 26px 20px;
	display: block;
	width: 100%;
	height: 100%;
	font-size: 1.4rem;
	text-decoration: none;
}
.solution-filter .leading-section .solution-filter-buttons ul > li a span {
	display: block;
	max-width: 56px;
	margin: auto;
	margin-bottom: 8px;
}
@media (min-width: 768px) {
	.solution-filter .leading-section .solution-filter-buttons ul > li a {
		padding: 20px;
		font-size: 1.6rem;
	}
}
@media (hover: hover) {
	.solution-filter .leading-section .solution-filter-buttons ul > li::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: var(--color-text-link);
		transform-origin: bottom right;
		transform: scale(0);
		transition: transform 0.3s ease-in-out;
	}
	.solution-filter .leading-section .solution-filter-buttons ul > li a {
		transition: color 0.2s linear;
	}
	.solution-filter .leading-section .solution-filter-buttons ul > li:hover::before {
		transform-origin: top left;
		transform: scale(1);
	}
	.solution-filter .leading-section .solution-filter-buttons ul > li:hover a {
		color: var(--color-text-link);
	}
}
@media (min-width: 768px) {
	.solution-filter .leading-section .solution-filter-buttons ul {
		margin-bottom: 30px;
	}
}
.solution-filter .leading-section .solution-filter-buttons h2 {
	font-family: var(--font-serif);
	text-align: center;
	font-size: 2rem;
	margin-bottom: 24px;
}
@media (min-width: 768px) {
	.solution-filter .leading-section .solution-filter-buttons h2 {
		font-size: 2.4rem;
	}
}
.solution-filter .solution-drop {
	padding-top: 64px;
	margin: 0 auto 0;
	display: flex;
	align-items: center;
}
@media (max-width: 767px) {
	.solution-filter .solution-drop {
		padding: 64px 20px 0 20px;
	}
}
@media (min-width: 768px) {
	.solution-filter .solution-drop {
		max-width: 1200px;
	}
}
.solution-filter .solution-drop p {
	font-family: var(--font-serif);
}
.solution-filter .solution-drop .c-select {
	margin-left: 16px;
}
.solution-filter .solution-services {
	margin: 40px auto 0;
}
@media (max-width: 767px) {
	.solution-filter .solution-services {
		padding: 0 20px;
	}
	.solution-filter .solution-services ul li + li {
		margin-top: 20px;
	}
}
@media (min-width: 768px) {
	.solution-filter .solution-services {
		max-width: 1200px;
	}
	.solution-filter .solution-services ul {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
	}
}
@media (min-width: 768px) {
	.solution-filter-search {
		max-width: 680px;
		margin: auto;
	}
}
.solution-filter-search__form .ss-search-input {
	width: 100% !important;
	padding: 0 50px !important;
	height: 39px;
	box-shadow: none !important;
	border-radius: 25px;
	border: 1px solid;
	border-color: var(--color-text);
	background-color: #fff;
	float: left;
}
@media (min-width: 768px) {
	.solution-filter-search__form .ss-search-input {
		height: 46px;
		padding: 0 70px !important;
	}
}
.solution-filter-search__form .ss-search-button {
	position: relative !important;
	height: 39px;
	font-size: 1.6rem;
	color: #FFF;
	background-color: var(--color-text);
	width: 100px !important;
	margin-left: -100px !important;
	border-radius: 25px !important;
}
@media (min-width: 768px) {
	.solution-filter-search__form .ss-search-button {
		height: 46px;
	}
}
.solution-filter-search__form .search-input-icon {
	float: left;
	margin-top: -25px;
	margin-left: 28px;
}
@media (min-width: 768px) {
	.solution-filter-search__form .search-input-icon {
		margin-top: -33px;
		margin-left: 30px;
	}
}