.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	position: relative;
}

.cp_box label {
	position: absolute;
	z-index: 1;
	bottom: 0;
	width: 100%;
	height: 70px; /* グラデーションの高さ */
	cursor: pointer;
	text-align: center;
	margin-bottom: 0;
	/* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
	background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 95%);
}
/*
.cp_box input:checked + label {
	background: inherit;  開いた時にグラデーションを消す
}
*/
.cp_box input:checked + label {
	background: inherit; /* 開いた時にグラデーションを消す */
}

.cp_box label:after {
	line-height: 2rem;
	position: absolute;
	z-index: 1;
	bottom: 15px;
	width: 60%;
	content: '続き';
	transform: translate(-50%, 0);
	letter-spacing: 0.08em;
	color: #ffffff;
	border-radius: 20px;
	background-color: rgba(74, 102, 152, 0.517);
}
.cp_box input {
	display: none;
}
.cp_box label {
    /* ... 既存のスタイル ... */
    pointer-events: none; /* ラベル全体のクリックイベントを無効化 */
}

.cp_box label:after {
    /* ... 既存のスタイル ... */
    pointer-events: auto; /* ボタン部分のクリックイベントを有効化 */
}

/* ボタンのホバー効果を追加（オプション） */
.cp_box label:after:hover {
    background-color: rgba(74, 103, 152, 0.942); /* ホバー時の背景色を少し濃くする */
}
.cp_box .cp_container {
	overflow: hidden;
	height: 100px; /* 開く前に見えている部分の高さ */
	transition: all 2s;
}
/*
.cp_box input:checked + label {
	 display: none ; 閉じるボタンを消す場合解放
}
*/
.cp_box input:checked + label:after {
	content: '閉';
}
.cp_box input:checked ~ .cp_container {
	height: auto;
	padding-bottom: 70px; /* 閉じるボタンのbottomからの位置 */
	transition: all 1s;
}

.cp_box input:checked ~ .cp_container {
    max-height: 2000px; /* コンテンツの最大高さより大きな値 */
    transition: max-height 1s ease-in; /* 開く時のトランジションを調整 */
}
.cp_box .cp_container {
    overflow: hidden;
    max-height: 100px; /* 開く前に見えている部分の高さ */
    transition: max-height 0.5s ease-out; /* トランジションを調整 */
}

/* テスト */
.cp_box label {
	/* ... 既存のスタイル ... */
	pointer-events: none;
	/* ラベル全体のクリックイベントを無効化 */
}

.cp_box label:after {
	/* ... 既存のスタイル ... */
	pointer-events: auto;
	/* ボタン部分のクリックイベントを有効化 */
}

/* ボタンのホバー効果を追加（オプション） */
.cp_box label:after:hover {
	background-color: rgba(74, 102, 152, 0.7);
	/* ホバー時の背景色を少し濃くする */
}
/* テスト */