@CHARSET "utf-8";

body {
    min-width: initial;
}

.pt-data-wrap ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 500px;
	gap: 20px;
}

.pt-data-wrap li:nth-child(odd) {
	width: calc(100% / 3);
}

.pt-data-wrap li:nth-child(even) {
	width: calc(100% / 2);
}

/*------------------------------------------------------------------------------
	カスタムセレクトボックス
------------------------------------------------------------------------------*/
.custom_select_box {
	position: relative;
	width: 70%;
}

/* 選択表示エリアのスタイル */
.custom_select_header {
	padding: 10px;
	border: 1px solid #ccc;
	background-color: #f9f9f9;
	cursor: pointer;
	user-select: none; /* テキスト選択を防止 */
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* 矢印アイコン */
.arrow {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 5px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #333;
	transition: transform 0.3s;
}
/* リスト展開時の矢印 */
.custom_select_box.open .arrow {
	transform: rotate(180deg);
}

/* ドロップダウンリストのスタイル */
.custom_select_box .custom_options_list {
	list-style: none;
	padding: 0;
	margin: 0;
	border: 1px solid #ccc;
	border-top: none;
	position: absolute;
	width: 100%;
	z-index: 10;
	background-color: #fff;
	max-height: 200px;
	overflow-y: auto;
	display: none; /* 初期状態では非表示 */
}

/* リスト項目のスタイル */
.custom_select_box .custom_options_list li {
	padding: 10px;
	cursor: pointer;
	width: 100%;
}

.custom_select_box .custom_options_list li:hover {
	background-color: #e0e0e0;
}

/* 選択されている項目のスタイル */
.custom_select_box .custom_options_list li.selected {
	background-color: #007bff;
	color: white;
}


@media screen and (max-width: 599px) {
	.pt-data-wrap ul {
		width: 100%;
		flex-direction: column;
		gap: 15px;
	}

	.pt-data-wrap li:nth-child(odd) {
		width: 100%;
		border-left: 5px solid var(--main-color);
		padding-left: 5px;
	}

	.pt-data-wrap li:nth-child(even) {
		width: 100%;
	}
}