* {
	box-sizing: border-box;
}

#TopMargin,
#BottomMargin {
    height: 100px;
}

#HeaderTitle {
    text-align: center; /* テキストを中央揃え */
    margin: 16px 0; /* 上下に16pxの余白を設定 */
    font-size: 24px;
    letter-spacing: 0.5px;
}

.list_body {
    display: flex; /* Flexboxを使用 */
    justify-content: center; /* 中央揃え */
    width: 100%; /* 親要素の幅を100%に設定 */
}

.box_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(324px, 324px)); /* アイテムが自動的に横に並ぶ */
    gap: 36px; /* アイテム間の間隔 */
    justify-content: center; /* アイテムを中央揃えにする */
    padding: 12px;
    width: 1440px;
    margin: 0 auto; /* 中央揃え */
}
.unit_link {
    display: flex;
    justify-content: center;
    color: black;
    border-radius: 20px;
    text-decoration: none; /* リンクの下線を除去 */
}

.box_list .box_unit {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 324px;
    padding: 12px;
    border-radius: 20px;
    box-shadow: 2px 2px 6px #bfbfbf;
}

.unit_hdg {
    margin: 8px;
    text-align: center; /* テキストを中央揃え */
    font-size: 20px;
    letter-spacing: 0.2px;
}

.unit_txt {
    margin: 8px 8px 16px 8px;
    font-size: 16px;
    letter-spacing: 0.2px;
    line-height: 1.6;
}
.btn {
    position:relative;
    width: 100%;
    margin-top: auto;

    text-align: center;
    display: inline-block; /* 要素をインラインブロックにする */
    padding: 10px 20px; /* ボタンのパディング */
    background-color: #ff542e; /* ボタンの背景色 */
    color: white; /* テキストの色 */
    border-radius: 8px; /* ボタンの角を丸くする */
    box-shadow: 2px 2px 4px #80554b;
    transition: all 50ms ease;
    font-size: 16px;
    letter-spacing: 0.5px;
}

a:hover .btn {
    background-color: #ff9b85; /* ホバー時の背景色 */
    box-shadow: 1px 1px 2px #806560;
}

.details_body {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.details {
	padding: 12px;
	width: 800px;
	margin: 0 auto;
	box-sizing: border-box;
}

#case-details-footer {
	background-color: #f7f7f7;
}

.details img {
	margin: 16px;
	width: 100%;
}

.item {
	margin-bottom: 32px;
}

.item-header {
	margin: 16px 0;
	padding: 4px;
	font-weight: bold;
	font-size: 20px;
	letter-spacing: 0.5px;
	border-bottom: 2px solid black;
}

.item-value {
	margin: 8px;
	font-size: 16px;
	letter-spacing: 0.5px;
	line-height: 1.6;
}

dl {
	margin: 12px 0;
	display: flex;
	flex-wrap: wrap;
	width:776px;
	font-size: 14px;
}

dt {
	width: 100px;
	margin: 0 0 0 12px;
	font-weight: bold;
	letter-spacing: 1px;
}

dd {
	width: 664px;
	margin: 0;
	letter-spacing: 0.5px;