@charset "UTF-8";

/* ============================================================
	CASE
	- 法律相談事例一覧・詳細ページ
	============================================================ */

/* ページタイトル */
.l-page-ttl {
	background-image: url(../img/case/common/case_page-ttl.webp);
}


/* 一覧 */
.p-cats {
	margin: 80px auto;
}

.p-cats__list {
	display: flex;
	justify-content: flex-start;
	gap: 16px;
	flex-wrap: wrap;
}

.p-cats__item {
	display: inline-block;
}

.p-cats__btn {
	display: block;
	width: 100%;
	text-decoration: none;
	background-color: var(--color_white);
	color: var(--color_black);
	text-align: center;
	padding: 0.5em 1.4em;
	height: 100%;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
	border: 1px solid var(--color_gray02);
	line-height: 1.5;
	letter-spacing: 0.1em;
}
.p-cats__btn:hover {
	background-color: var(--color02);
	color: var(--color_white);
	border: 1px solid var(--color02);
}

.p-cats__btn.is-current {
	background-color: var(--color02);
	color: var(--color_white);
	border: 1px solid var(--color02);
}

.p-archive {
	margin: 80px auto;
}

.p-archive__content {
	margin: 64px auto 0;
	display: flex;
	flex-wrap: wrap;
	gap: 80px 5%;
}

.p-archive__item {
	width: 30%;
	display: block;
	border-bottom: 1px solid var(--color_gray03);
	color: var(--color_black);
	text-decoration: none;
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
}
.p-archive__item:hover {
	color: var(--color02);
}

.p-archive__item-txt {
	width: 100%;
	margin-top: 1em;
}

.p-archive__item-category {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1em;
	font-size: clamp(12px, calc(14 / 768 * 100vw), 14px);
	line-height: 1.6;
	font-weight: var(--fw_jp_bold);
	color: var(--color02);
}

.p-archive__item-ttl {
	line-height: 1.6;
	font-weight: var(--fw_jp_bold);
	margin-top: 0.5em;
}

.p-archive__item-img {
	width: 100%;
	aspect-ratio: 4/3;
	overflow: hidden;
}

.p-archive__item-img img {
	transition: .3s;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-ms-transition: .3s;
	-o-transition: .3s;
}
.p-archive__item:hover .p-archive__item-img img {
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
}

.p-archive__item-more {
	padding: 1em 0;
	line-height: 1.5;
	font-weight: var(--fw_jp_bold);
	letter-spacing: 0.1em;
	color: var(--color01);
	text-align: right;
}

.p-archive__item-more span {
	padding-right: 1.5em;
	position: relative;
}
.p-archive__item-more span::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	width: 1em;
	aspect-ratio: 1/1;
	background-image: url(../img/common/icon_arrow-next_black.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	transition:.3s ;
	-webkit-transition:.3s ;
	-moz-transition:.3s ;
	-ms-transition:.3s ;
	-o-transition:.3s ;
}
.p-archive__item:hover .p-archive__item-more span::after {
	right: -6px;
}

.p-archive__empty {
	text-align: center;
	font-size:  clamp(16px, calc(18 / 768 * 100vw), 18px);
	font-weight: var(--fw_jp_bold);
}


/* 詳細 */
/* 詳細 - 背景 */
.p-detail-bg {
	position: relative;
	z-index: 0;
	isolation: isolate;
	overflow: hidden;
	-webkit-clip-path: inset(0);
	clip-path: inset(0);
}

.p-detail-bg::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background-image: var(--case-bg-image);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	pointer-events: none;
}

/* 詳細 - パンクズ */
.p-detail-bg .c-breadcrumb {
    color: var(--color_white);
}

.p-detail-bg .c-breadcrumb__link {
	color: var(--color_white);
}

/* 詳細 - 本体外枠 */
.p-detail {
	position: relative;
	z-index: 1;
	margin: 80px auto 160px;
}

/* 詳細 - 上部画像とタイトル */
.p-detail__header {
	display: flex;
	align-items: center;
}

.p-detail__main-image {
	width: 63%;
	height: 520px;
}

.p-detail__ttl {
	width: 37%;
}

.p-detail__ttl-inner {
	margin-left: -100%;
}

.p-detail__categories {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 1em;
	margin-bottom: 1.5em;
}

.p-detail__category {
	display: inline-block;
	padding: 0.5em 1.5em;
	background-color: var(--color_white);
	font-size: clamp(14px, calc(20 / 768 * 100vw), 20px);
	line-height: 1.5;
	font-weight: var(--fw_jp_bold);
	letter-spacing: 0.1em;
}

.p-detail__heading {
	font-size: clamp(18px, calc(36 / 768 * 100vw), 36px);
	line-height: 1.5;
	font-weight: var(--fw_jp_bold);
	letter-spacing: 0.1em;
	color: var(--color_white);
	padding: 1em;
	background-color: rgb(0 0 0 / 65%);
}

/* 詳細 - 本文外枠 */
.p-detail__content {
	background-color: var(--color_white);
	margin: 80px auto 0;
	padding: 80px;
}

/* 詳細 - 事例概要 */
.p-detail-summary__heading {
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: vertical-rl;
	text-orientation: upright;
	-webkit-text-orientation: upright;
	white-space: nowrap;
	font-size: clamp(20px, calc(28 / 768 * 100vw), 28px);
	line-height: 1.5;
	font-weight: var(--fw_jp_bold);
	letter-spacing: 0.10em;
	color: var(--color01);
	margin: 0 1em -1.5em auto;
}

.p-detail-summary__body {
	padding: 48px;
	background-color: var(--color10);
}

/* 詳細 - ご相談・問題となった内容 */
.p-detail-consultation {
	position: relative;
	margin-top: 64px;
	margin-left: 48px;
	padding: 40px;
	background-color: var(--color_white);
	border: 1px solid var(--color01);
}
.p-detail-consultation::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -48px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	width: 48px;
	height: 56px;
	background-color: var(--color01);
	clip-path: polygon(0 50%, 100% 0, 100% 100%);
	pointer-events: none;
}
.p-detail-consultation::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -46px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	width: 47px;
	height: 55px;
	background-color: var(--color_white);
	clip-path: polygon(0 50%, 100% 0, 100% 100%);
	pointer-events: none;
}

.p-detail-consultation__heading {
	font-size: clamp(20px, calc(28 / 768 * 100vw), 28px);
	line-height: 1.5;
	font-weight: var(--fw_jp_bold);
	letter-spacing: 0.1em;
	color: var(--color01);
	margin-bottom: 1.5em;
	padding-left: 3.5em;
	position: relative;
}
.p-detail-consultation__heading::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	width: 3em;
	aspect-ratio: 1/1;
	background-image: url(../img/case/common/icon_consultation.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* 詳細 - 当事務所の対応 */
.p-detail-response {
	position: relative;
	margin-top: 64px;
	margin-right: 48px;
	padding: 40px;
	background-color: var(--color10);
	border: 1px solid var(--color01);
}
.p-detail-response::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -48px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	width: 48px;
	height: 56px;
	background-color: var(--color01);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	pointer-events: none;
}
.p-detail-response::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -46px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	width: 47px;
	height: 55px;
	background-color: var(--color10);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	pointer-events: none;
}

.p-detail-response__heading {
	font-size: clamp(20px, calc(28 / 768 * 100vw), 28px);
	line-height: 1.5;
	font-weight: var(--fw_jp_bold);
	letter-spacing: 0.1em;
	color: var(--color01);
	margin-bottom: 0.5em;
}

/* 詳細 - 解決結果 */
.p-detail-result {
	position: relative;
	margin-top: 128px;
	padding: 48px;
	background-color: var(--color_white);
	border: 1px solid var(--color01);
}
.p-detail-result::before {
	content: "";
	position: absolute;
	top: -80px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	width: 64px;
	height: 32px;
	background-color: var(--color04);
	clip-path: polygon(0 0,	100% 0,	50% 100%);
	pointer-events: none;
}

.p-detail-result__heading {
	font-size: clamp(20px, calc(28 / 768 * 100vw), 28px);
	line-height: 1.5;
	font-weight: var(--fw_jp_bold);
	letter-spacing: 0.1em;
	color: var(--color01);
	text-align: center;
	margin-bottom: 0.5em;
}

.p-detail-result__heading span {
	position: relative;
	z-index: 2;
}
.p-detail-result__heading span::before {
	content: "";
	position: absolute;
	bottom: -0.5em;
	left: -1.5em;
	z-index: -1;
	width: 3em;
	aspect-ratio: 1/1;
	background-image: url(../img/common/icon_check_mint.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* 詳細 - 本事例から分かること */
.p-detail-points {
	padding: 80px;
	color: var(--color_white);
}

.p-detail-points__content {
	padding: 48px;
	border: 1px solid var(--color_white);
}

.p-detail-points__heading {
	font-size: clamp(20px, calc(28 / 768 * 100vw), 28px);
	line-height: 1.5;
	font-weight: var(--fw_jp_bold);
	letter-spacing: 0.1em;
	color: var(--color_white);
	margin-bottom: 1.5em;
	padding-left: 3.5em;
	position: relative;
}
.p-detail-points__heading::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	width: 3em;
	aspect-ratio: 1/1;
	background-image: url(../img/case/common/icon_point.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.p-detail-points__body {
	font-weight: var(--fw_jp_bold);
}

/* 詳細 - 戻るボタン */
.p-detail .c-btns {
	text-align: center;
}

.p-detail .c-btn:hover {
	background-color: transparent;
}


/* エラーテキスト */
.p-detail__error {
	font-size: clamp(18px, calc(30 / 768 * 100vw), 30px);
	line-height: 1.5;
	font-weight: var(--fw_jp_bold);
	letter-spacing: 0.05em;
	color: var(--color_err);
	text-align: center;
}

/***************************/
/* 詳細 - 本文内装飾 - リスト */
/***************************/
.p-case-content__list {
	margin: 1em auto;
	padding: 0;
	list-style: none;
}

/* ミント背景・白文字 */
.p-case-content__list--tag {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.p-case-content__list--tag > li {
	padding: 0.5em 1em;
	background-color: var(--color02);
	color: var(--color_white);
	font-weight: var(--fw_jp_bold);
}

/* ●付き・青文字 */
.p-case-content__list--bullet > li {
	position: relative;
	padding-left: 1.2em;
	color: var(--color01);
	font-weight: var(--fw_jp_bold);
	padding-bottom: 0.2em;
}

.p-case-content__list--bullet > li::before {
	content: "●";
	position: absolute;
	top: 0;
	left: 0;
}

.p-case-content__list--bullet > li > span {
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.2em;
}

/* 白文字・白枠 */
.p-case-content__list--outline {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.p-case-content__list--outline > li {
	padding: 0.5em 1em;
	border: 1px solid currentColor;
	color: var(--color_white);
	font-weight: var(--fw_jp_bold);
}

/***************************/
/* 詳細 - 本文内装飾 - 強調 */
/***************************/
.p-case-content__em {
	font-weight: var(--fw_jp_bold);
}

.p-case-content__em--line {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}



/* スマートフォン用 - ブレイクポイント768 */
@media screen and (max-width: 768px) {

	/* 一覧 */
	.p-cats { margin: 40px auto; }
	.p-cats__list { gap: 8px; }
	.p-archive { margin: 40px auto; }
	.p-archive__content { margin: 40px auto 0; flex-direction: column; gap: 40px 5%; }
	.p-archive__item { width: 100%; }
	.p-archive__item-img { max-height: 240px; }


	/* 詳細 */
	/* 詳細 - 本体外枠 */
	.p-detail { margin: 40px auto 80px; }

	/* 詳細 - 上部画像とタイトル */
	.p-detail__header { flex-direction: column; align-items: flex-start; }
	.p-detail__main-image { width: 90%; height: 320px; }
	.p-detail__ttl { width: 100%; }
	.p-detail__ttl-inner { margin-left: 0; margin-top: -120px; }
	.p-detail__heading { letter-spacing: 0; }

	/* 詳細 - 本文外枠 */
	.p-detail__content { margin: 40px auto 0; padding: 24px; }

	/* 詳細 - 事例概要 */
	.p-detail-summary__heading {
		writing-mode: horizontal-tb;
		-webkit-writing-mode: horizontal-tb;
		-ms-writing-mode: horizontal-tb;
		text-orientation: mixed;
		-webkit-text-orientation: mixed;
		white-space: normal;
		margin: 0 0 -0.5em 0;
	}
	.p-detail-summary__body { padding: 24px; }

	/* 詳細 - ご相談・問題となった内容 */
	.p-detail-consultation { margin-top: 32px; margin-left: 0; padding: 24px; }
	.p-detail-consultation::before { left: -20px; width: 20px; height: 28px; }
	.p-detail-consultation::after { left: -18px; width: 19px; height: 27px; }

	/* 詳細 - 当事務所の対応 */
	.p-detail-response { margin-top: 32px; margin-right: 0; padding: 24px; }
	.p-detail-response::before { right: -20px; width: 20px; height: 28px; }
	.p-detail-response::after { right: -18px; width: 19px; height: 27px; }

	/* 詳細 - 解決結果 */
	.p-detail-result { margin-top: 64px; padding: 24px; }
	.p-detail-result::before { top: -40px; width: 32px; height: 16px; }

	/* 詳細 - 本事例から分かること */
	.p-detail-points { padding: 24px; }
	.p-detail-points__content { padding: 24px; }

	/* エラーテキスト */
	.p-detail__error { letter-spacing: 0; }

	/***************************/
	/* 詳細 - 本文内装飾 - リスト */
	/***************************/
	/* ミント背景・白文字 */
	.p-case-content__list--tag { gap: 0.5em; }

	/* 白文字・白枠 */
	.p-case-content__list--outline { gap: 0.5em; }

}