@charset "UTF-8";
/*====================================================
CASE STUDY 一覧
====================================================*/
/* .p-case-a-sec1__splide {
	padding-top: calc(80 * var(--width-ratio-1280));
	padding-bottom: calc(34 * var(--width-ratio-1280));
}
@media screen and (max-width: 768px) {
	.p-case-a-sec1__splide {
		padding-top: calc(40 * var(--width-ratio-1280));
		padding-bottom: calc(40 * var(--width-ratio-1280));
	}
} */

.p-case-a-sec1__splide .splide__pagination {
	margin-top: calc(39 * var(--width-ratio-1280));
}
@media screen and (max-width: 768px) {
	.p-case-a-sec1__splide .splide__pagination {
		margin-top: calc(15 * var(--width-ratio-1280));
	}
}

.p-case-a-sec1__slide {
	position: relative;
}

.p-case-a-sec1__slide--link {
	display: grid;
	grid-template-columns: calc(904 / 1680 * 100vw) 1fr;
	background-color: #eff6ff;
}
@media screen and (max-width: 768px) {
	.p-case-a-sec1__slide--link {
		display: block;
	}
}

.p-case-a-sec1__slide--img {
	aspect-ratio: 904/497;
}
@media screen and (max-width: 768px) {
	.p-case-a-sec1__slide--img {
		aspect-ratio: 375/262;
	}
}
.p-case-a-sec1__slide--img img {
	height: 100%;
	object-fit: cover;
}

.p-case-a-sec1__slide--content {
	align-self: center;
	max-width: 628px;
	margin-right: 20px;
	padding-left: calc(50 * var(--width-ratio-1280));
}
@media screen and (max-width: 768px) {
	.p-case-a-sec1__slide--content {
		padding: calc(38 * var(--width-ratio-1280)) calc(24 * var(--width-ratio-1280));
	}
}

.p-case-a-sec1__slide--company {
	color: #314158;
}
@media screen and (max-width: 768px) {
	.p-case-a-sec1__slide--company {
	}
}

.p-case-a-sec1__slide--ttl {
	color: var(--color-blue);
}
@media screen and (max-width: 768px) {
	.p-case-a-sec1__slide--ttl {
	}
}

.p-case-a-sec1__slide--body {
}
@media screen and (max-width: 768px) {
	.p-case-a-sec1__slide--body {
	}
}

/* p-case-a-sec2
----------------------------------------------- */
.p-case-a-sec2__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(32 * var(--width-ratio-1280));
}

@media screen and (max-width: 768px) {
	.p-case-a-sec2__list {
		display: block;
	}
	.p-case-a-sec2__list > * + * {
		display: block;
		margin-top: calc(16 * var(--width-ratio-1280));
	}
}

.p-case-a-sec2__item {
	position: relative;
}

.p-case-a-sec2__item .c-case-card,
.p-case-a-sec2__item .c-case-card__link {
	height: 100%;
}

/* p-case-a-sec3
----------------------------------------------- */
.p-case-a-sec3__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: calc(24 * var(--width-ratio-1280));
}

@media screen and (max-width: 768px) {
	.p-case-a-sec3__list {
		grid-template-columns: repeat(2, 1fr);
		gap: calc(16 * var(--width-ratio-1280));
	}
}

.p-case-a-sec3__item {
	position: relative;
}
.p-case-a-sec3__item .c-case-card2,
.p-case-a-sec3__item .c-case-card2__link {
	height: 100%;
}

/*====================================================
CASE STUDY MAIN 詳細
====================================================*/
.p-case-s-sec1 {
	padding-top: calc(80 * var(--width-ratio-1280));
}
@media screen and (max-width: 768px) {
	.p-case-s-sec1 {
		padding-top: calc(40 * var(--width-ratio-1280));
	}
}
.p-case-s-sec1__ttl {
	text-align: center;
}
@media screen and (max-width: 768px) {
	.p-case-s-sec1__ttl {
		text-align: left;
		font-size: 1.2rem;
	}
	.p-case-s-sec1__ttl .p-case-s-sec1__ttl__subtitle{
		font-weight: 400;
		font-size: 1.0rem;
	}
}

.p-case-s-sec1__content {
	align-self: center;
	padding: calc(24 * var(--width-ratio-1280));
}
@media screen and (max-width: 768px) {
	.p-case-s-sec1__content {
		padding: calc(24 * var(--width-ratio-1280)) calc(16 * var(--width-ratio-1280));
	}
}

.p-case-s-sec1__logo {
	display: block;
	width: auto;
	max-height: 110px;
	margin-inline: auto;
}
@media screen and (max-width: 768px) {
	.p-case-s-sec1__logo {
		max-height: 65px;
	}
}

.p-case-s-sec1__dl {
	display: grid;
	grid-template-columns: max-content auto;
	align-items: center;
	row-gap: calc(12 * var(--width-ratio-1280));
	column-gap: calc(58 * var(--width-ratio-1280));
	width: fit-content;
	margin-inline: auto;
}
@media screen and (max-width: 768px) {
	.p-case-s-sec1__dl {
		column-gap: calc(24 * var(--width-ratio-1280));
		margin-top: calc(20 * var(--width-ratio-1280));
	}
}

.p-case-s-sec1__dt {
	color: #0540f2;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.01em;
	font-size: calc(16 * var(--width-ratio-1280));
	font-family: var(--font-ja);
}
@media screen and (max-width: 768px) {
	.p-case-s-sec1__dt {
		font-size: calc(14 * var(--width-ratio-1280));
	}
}

.p-case-s-sec1__dd {
	color: var(--color-text);
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.01em;
	font-size: calc(18 * var(--width-ratio-1280));
	font-family: var(--font-ja);
}
@media screen and (max-width: 768px) {
	.p-case-s-sec1__dd {
		font-size: calc(16 * var(--width-ratio-1280));
	}
}

.p-case-s-sec1__dd a {
	text-decoration: underline;
	color: #62748e;
}

/* p-case-s-sec2
----------------------------------------------- */

.p-case-s-sec2__profile {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: calc(32 * var(--width-ratio-1280));
}
@media screen and (max-width: 768px) {
	.p-case-s-sec2__profile {
		display: block;
	}
	.p-case-s-sec2__profile > * + * {
		margin-top: calc(16 * var(--width-ratio-1280));
	}
}

.p-case-s-sec2__profile--item {
	--iconSize: calc(100 * var(--width-ratio-1280));
	display: grid;
	grid-template:
		"img ." 1fr
		"img position" auto
		"img name" auto
		"img ." 1fr / var(--iconSize) 1fr;
	row-gap: calc(8 * var(--width-ratio-1280));
	column-gap: calc(16 * var(--width-ratio-1280));
	align-content: center;
}

.p-case-s-sec2__profile--img {
	grid-area: img;
	align-self: center;
	overflow: hidden;
	border-radius: 50%;
	aspect-ratio: 1;
}

.p-case-s-sec2__profile--position {
	grid-area: position;
	color: #90a1b9;
	letter-spacing: 0.01em;
}

.p-case-s-sec2__profile--name {
	grid-area: name;
}

.p-case-s-sec2__desc {
	line-height: 2.0rem;
}

.p-case-s-sec2__head {
	--iconSize: 32px;
	--paddingInline: calc(24 * var(--width-ratio-1280));
	--paddingBlock: calc(24 * var(--width-ratio-1280));
	--paddingInlineSum: calc(var(--iconSize) + var(--paddingInline));
	--paddingBlockSum: calc(var(--iconSize) + var(--paddingBlock));
	position: relative;
	border-radius: 40px;
	text-align: center;
	color: #000;
	padding-inline: var(--paddingInlineSum);
	padding-block: var(--paddingBlockSum);
}
@media screen and (max-width: 768px) {
	.p-case-s-sec2__head {
		--iconSize: 24px;
		--paddingInline: calc(16 * var(--width-ratio-1280));
		--paddingBlock: calc(16 * var(--width-ratio-1280));
		border-radius: 30px;
		text-align: left;
		padding-inline: var(--paddingInline);
		padding-bottom: var(--paddingBlock);
	}
}

.p-case-s-sec2__head::before,
.p-case-s-sec2__head::after {
	position: absolute;
	content: "";
	aspect-ratio: 1;
	width: var(--iconSize);
	background: url("../img/common/icon_quote.svg") no-repeat center center/contain;
}

.p-case-s-sec2__head::before {
	top: var(--paddingBlock);
	left: var(--paddingInline);
}

.p-case-s-sec2__head::after {
	bottom: var(--paddingBlock);
	right: var(--paddingInline);
}

@media screen and (max-width: 768px) {
	.p-case-s-sec2__head::before {
		top: 0;
	}

	.p-case-s-sec2__head::after {
		bottom: 0;
	}
}

/* p-case-s-sec3
----------------------------------------------- */

/* p-case-s-sec4
----------------------------------------------- */
.p-case-s-sec4 {
	padding-top: calc(60 * var(--width-ratio-1280));
	padding-bottom: calc(90 * var(--width-ratio-1280));
}
@media screen and (max-width: 768px) {
	.p-case-s-sec4 {
		padding-top: calc(40 * var(--width-ratio-1280));
		padding-bottom: calc(80 * var(--width-ratio-1280));
	}
}

.p-case-s-sec4__ttl {
	margin-bottom: calc(24 * var(--width-ratio-1280));
}

.p-case-s-sec4__box {
	display: grid;
	grid-template:
		"img head" auto
		"img name" auto
		"img body" 1fr / calc(180 * var(--width-ratio-1280)) 1fr;
	column-gap: calc(32 * var(--width-ratio-1280));
	background-color: #f1f9fe;
	border: 1px solid #d7e7ff;
	border-radius: 40px;
	padding: calc(24 * var(--width-ratio-1280)) calc(24 * var(--width-ratio-1280));
}
@media screen and (max-width: 768px) {
	.p-case-s-sec4__box {
		display: block;
		border-radius: 30px;
		padding: calc(16 * var(--width-ratio-1280)) calc(16 * var(--width-ratio-1280)) calc(36 * var(--width-ratio-1280));
	}
}

.p-case-s-sec4__box--img {
	grid-area: img;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: calc(24 * var(--width-ratio-1280));
}
@media screen and (max-width: 768px) {
	.p-case-s-sec4__box--img {
		aspect-ratio: 279/180;
	}
}

.p-case-s-sec4__box--img img {
	object-fit: cover;
	height: 100%;
}

.p-case-s-sec4__box--head {
	grid-area: head;
}
@media screen and (max-width: 768px) {
	.p-case-s-sec4__box--head {
		font-weight: bold;
		margin-top: calc(16 * var(--width-ratio-1280));
	}
}

.p-case-s-sec4__box--name {
	grid-area: name;
}
@media screen and (max-width: 768px) {
	.p-case-s-sec4__box--name {
		margin-top: calc(10 * var(--width-ratio-1280));
	}
}

.p-case-s-sec4__box--body {
	grid-area: body;
	margin-top: calc(20 * var(--width-ratio-1280));
}
@media screen and (max-width: 768px) {
	.p-case-s-sec4__box--body {
		margin-top: calc(10 * var(--width-ratio-1280));
	}
}

/* p-case-s-sec5
----------------------------------------------- */
.p-case-s-sec5__ttl {
	color: #0540f2;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.01em;
	font-size: calc(16 * var(--width-ratio-1280));
	font-family: var(--font-ja);
}
@media screen and (max-width: 768px) {
	.p-case-s-sec5__ttl {
		font-size: calc(14 * var(--width-ratio-1280));
	}
}

.p-case-s-sec5__body {
	color: var(--color-text);
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.01em;
	font-size: calc(18 * var(--width-ratio-1280));
}
@media screen and (max-width: 768px) {
	.p-case-s-sec5__body {
		font-size: calc(16 * var(--width-ratio-1280));
	}
}

.p-case-s-sec5__list {
	display: flex;
	flex-wrap: wrap;
	row-gap: 20px;
	column-gap: 3em;
}
@media screen and (max-width: 768px) {
	.p-case-s-sec5__list {
		display: grid;
		grid-template-columns: max-content 1fr;
		gap: calc(32 * var(--width-ratio-1280)) 1.5em;
	}
}

.p-case-s-sec5__item {
	display: flex;
	align-items: center;
	column-gap: 2em;
}
@media screen and (max-width: 768px) {
	.p-case-s-sec5__item {
		display: contents;
	}
}

.p-case-s-sec5__item--body {
	color: var(--color-text);
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.01em;
	font-size: calc(18 * var(--width-ratio-1280));
}
@media screen and (max-width: 768px) {
	.p-case-s-sec5__item--body {
		font-size: calc(16 * var(--width-ratio-1280));
	}
}

.p-case-s-sec5__request {
	--iconSize: 100px;
	display: grid;
	grid-template-columns: var(--iconSize) 1fr;
	column-gap: calc(24 * var(--width-ratio-1280));
	align-items: center;
}
@media screen and (max-width: 768px) {
	.p-case-s-sec5__request {
		display: block;
	}
}

.p-case-s-sec5__request--img {
	aspect-ratio: 1;
}
@media screen and (max-width: 768px) {
	.p-case-s-sec5__request--img {
		display: none;
	}
}

/*====================================================
l-case-content
====================================================*/
/* コンテンツ用スタイル */
.l-case-content > :where(* + *) {
	margin-top: 1.4em;
	margin-bottom: 1em;
}
.l-case-content > :where(*:first-child) {
	margin-bottom: 1em;
}
.l-case-content > :where(*:last-child) {
	margin-bottom: 0;
}

.l-case-content > :where(*:not(h1, h2, h3, h4, h5)) {
	color: #62748e;
}

/* =====p===== */
.l-case-content :where(p) {
	line-height: 2.0rem;
	letter-spacing: 0.01em;
	font-size: calc(16 * var(--width-ratio-1280));
	font-family: var(--font-ja);
	color: var(--color-text);
}
@media screen and (max-width: 768px) {
	.l-case-content :where(p) {
		font-size: calc(14 * var(--width-ratio-1280));
	}
}

/* =====a===== */
.l-case-content :where(a) {
	color: #62748e;
	text-decoration: underline;
}

/* =====img===== */
.l-case-content :where(img) {
	display: block;
	border-radius: calc(24 * var(--width-ratio-1280));
	width: auto;
	height: auto;
	max-width: 100%;
}
.l-case-content :where(img.alignleft) {
	margin-right: auto;
}
.l-case-content :where(img.aligncenter) {
	margin-inline: auto;
}
.l-case-content :where(img.alignright) {
	margin-left: auto;
}

.l-case-content img {
    margin: 3rem 0;
}

.case_svlogo{
	padding: 2rem 0;
}

/* =====head===== */
.l-case-content h2{
	margin-top: 2.8rem;
}