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




.btn-flat-border {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #333333;
  border: solid 2px #333333;
  border-radius: 3px;
  transition: .4s;
	font-family: "Shippori Mincho", serif;
	width: 200px;
}

.btn-flat-border:hover {
  background: #333333;
  color: #fff;
}


/*===========================
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;
}

.overflow{
	overflow-y: hidden!important;
}