@charset "utf-8";
/* ==========================================================================
   症例集（セラミック・矯正）一覧／詳細
   /case/ceramic/ ・ /case/ortho/ ・ /case/category/ ・ /case/tag/ ・ /case/00x-xxx/
   ========================================================================== */

/* --------------------------------------------------------------------------
   一覧レイアウト（メイン＋サイドバー）
   -------------------------------------------------------------------------- */
.caseLayout{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 1120px;
	max-width: calc(100% - 5rem);
	margin: 6rem auto 14rem;
	position: relative;
	z-index: 0;
}
.caseLayout main.caseMain{
	width: calc(100% - 31rem);
	margin: 0;
}
.caseLayout main.caseMain:after{ content: none; }

/* --------------------------------------------------------------------------
   中央寄せテキストの文字落ち対策（症例関連ページ全体）
   行長を均等化し、日本語の文節単位で折り返す。
   ※ このCSSは症例ページ（一覧・カテゴリ・タグ・詳細）でのみ読み込まれる
   -------------------------------------------------------------------------- */
main h1,
main section h2:not(.no-style),
main .caseCard h2.caseCardTitle,
.caseBa .baLabel,
.caseSideTitle{
	text-wrap: balance;
	word-break: auto-phrase;
}

/* --------------------------------------------------------------------------
   症例カード
   -------------------------------------------------------------------------- */
.caseCard{
	border: 1px solid #e6e6e6;
	border-radius: 2rem;
	background: #fff;
	padding: 3rem 3rem 3.5rem;
}
.caseCard + .caseCard{ margin-top: 5rem; }

main .caseCard h2.caseCardTitle{
	margin: 0 0 2.5rem;
}
main .caseCard h2.caseCardTitle a{
	color: inherit;
	text-decoration: none;
}
main .caseCard h2.caseCardTitle a:hover{ opacity: .7; }

/* Before / After 写真 */
main section .caseBa,
main .caseCard .caseBa{
	display: flex;
	justify-content: space-between;
	margin-bottom: 2.5rem;
}
.caseBa .half{ width: calc(50% - 10px); }
.caseBa .half img{ width: 100%; display: block; }
.caseBa .baLabel{
	font-family: yu-mincho-pr6n, serif;
	text-align: center;
	font-size: 1.5rem;
	line-height: 1;
	padding: .6em 0;
	margin-bottom: 1rem;
	background: #f4f4f4;
	color: #666;
}
.caseBa .baLabel.after{
	background: linear-gradient(to right, #e8e089, #e6e6e6);
	color: #4c2d01;
}

/* 説明文 */
.caseCard .caseDesc{
	line-height: 1.8;
	margin-bottom: 1.5rem;
}

/* カテゴリ・タグ */
ul.caseTermList{
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin: 0 0 1rem;
}
ul.caseTermList li a{
	display: inline-block;
	font-size: 1.3rem;
	line-height: 1;
	padding: .5em 1.2em;
	border-radius: 2em;
	text-decoration: none;
	transition: opacity .2s;
}
ul.caseTermList li a:hover{ opacity: .7; }
ul.caseTermList li.cat a{
	background: linear-gradient(to right, #e8e089, #e6e6e6);
	color: #4c2d01;
}
ul.caseTermList li.tag a{
	border: 1px solid #d2c31d;
	color: #8a7d00;
	background: #fff;
}
ul.caseTermList li.tag a:before{ content: '#'; margin-right: .2em; }

/* 治療の詳細テーブル */
main section table.caseTable,
main .caseCard table.caseTable{
	width: 100%;
	margin: 2.5rem 0;
}
.caseCard table.caseTable{ font-size: 1.4rem; }
table.caseTable th{ width: 8em; }

/* ボタン */
.caseCard .caseBtn{ margin-top: 2.5rem; }
.caseBackBtn{ margin-top: 8rem; }

/* --------------------------------------------------------------------------
   サイドバー（カテゴリで探す・タグで探す）
   -------------------------------------------------------------------------- */
.caseSide{
	width: 26rem;
	flex-shrink: 0;
	position: sticky;
	top: 12rem;
}
.caseSideBox{
	border: 1px solid #e6e6e6;
	border-radius: 1.5rem;
	background: #fff;
	padding: 2rem;
}
.caseSideBox + .caseSideBox{ margin-top: 2.5rem; }
.caseSideTitle{
	font-family: yu-mincho-pr6n, serif;
	font-size: 1.7rem;
	color: #4c2d01;
	border-bottom: solid 1px #d2c31d;
	padding-bottom: .5em;
	margin-bottom: 1.2rem;
}
.caseSideBox ul li{ font-size: 1.4rem; line-height: 1.6; }
.caseSideBox ul li + li{ margin-top: 1rem; }
.caseSideBox ul li a{
	display: block;
	padding-left: 1.4rem;
	position: relative;
	text-decoration: none;
	color: #333;
}
.caseSideBox ul li a:hover{ opacity: .7; }
.caseSideBox ul li a:before{
	content: '';
	width: .7rem;
	height: .7rem;
	border-top: 1px solid #d2c31d;
	border-right: 1px solid #d2c31d;
	transform: rotate(45deg);
	position: absolute;
	left: 0;
	top: .7rem;
}
.caseSideBox ul.tagList{
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
}
.caseSideBox ul.tagList li + li{ margin-top: 0; }
.caseSideBox ul.tagList li a{
	padding: .4em 1em;
	border: 1px solid #d2c31d;
	border-radius: 2em;
	color: #8a7d00;
	font-size: 1.3rem;
	line-height: 1;
}
.caseSideBox ul.tagList li a:before{
	content: '#';
	position: static;
	border: none;
	transform: none;
	width: auto;
	height: auto;
	margin-right: .2em;
}

/* --------------------------------------------------------------------------
   SP
   -------------------------------------------------------------------------- */
@media(max-width: 768px){
	.caseLayout{
		display: block;
		width: 100%;
		max-width: 100%;
		margin: 5rem 0 8rem;
	}
	.caseLayout main.caseMain{
		width: 100%;
		margin: 0 0 6rem;
	}
	.caseCard{ padding: 2rem 1.8rem 2.5rem; }
	.caseBa .half{ width: calc(50% - 5px); }
	.caseBa .baLabel{ font-size: 1.2rem; }
	.caseCard table.caseTable{ font-size: 1.3rem; }
	table.caseTable th{ width: 6em; }

	.caseSide{
		width: auto;
		position: static;
		margin: 0 2.5rem;
	}
	.caseBackBtn{ margin-top: 5rem; }
}