@charset "utf-8";
/*===========================
add
===========================*/

:root {
	--basic-color:#2f2f2f;
}


/*===========================
btn01
===========================*/
.btn01{
 margin-right: 40px;
}

.btn01 a {
	--arrow-color: #000; /* 矢印の色を設定 */
	display: inline-flex; /* 横並びに配置 */
	align-items: center; /* 垂直方向を中央に揃える */
	color: var(--arrow-color); /* 文字色を矢印の色と一致 */
	text-decoration: none; /* 下線を非表示 */
	position: relative; /* 疑似要素の位置基準 */
 transition: 0.3s;
}

.btn01 a::after {
	border-bottom: 1px solid var(--arrow-color); /* 下線のスタイルを矢印として設定 */
	border-right: 1px solid var(--arrow-color); /* 右線のスタイルを矢印として設定 */
	content: ''; /* 疑似要素のコンテンツを空に設定 */
	width: 30px; /* 矢印の幅を30pxに設定 */
	height: 10px; /* 矢印の高さを10pxに設定 */
	position: absolute; /* 親要素に対して絶対位置 */
	left: 100%; /* テキストの右端に配置 */
	transform: skewX(50deg); /* 矢印の傾きの調整 */
	transition: all .3s; /* なめらかな移動効果 */
}


/* マウスオーバー時の動き */
.btn01 a:hover{
 color: #5e5e5e;
}
.btn01 a:hover::after {
	margin-left: 10px; /* マウスオーバー時に矢印を10px右に移動 */
 --arrow-color: #5e5e5e;
}



/*===========================
width
===========================*/
@media screen and (max-width: 768px) {
	.w100Tablet{
		width: 100% !important;
		box-sizing: border-box;
	}
}


/*===========================
wf
===========================*/
.wf-t-all ,ul.wf-t-all {
	width: fit-content;
	margin: auto;
}

@media screen and (min-width: 769px) {
	ul.wf-t,	ol.wf-t{
		width: fit-content;
		margin: auto;
	}
}


@media screen and (min-width: 601px) {
	ul.wf-pcONtabletONspOFF {
		width: fit-content !important;
		margin: auto !important;
	}
}