/* ==========================================================================
   ボタン・区切り線
   （Shortcodes Ultimate の content-shortcodes.css から必要分だけ移植）
   ========================================================================== */

/* --- ボタン ------------------------------------------------------------ */

.uk-button {
	display: inline-block !important;
	text-align: center;
	text-decoration: none !important;
	box-sizing: content-box !important;
	transition: all 0.2s;
}

/* ボタンの中身を包むspan。
   ⚠️「> 」で**直接の子だけ**に限定している。
      これを外すと、中のアイコンを包むspanにも block が当たって
      アイコンとテキストが縦に並び、ボタンが縦長になる（実際に一度なった）。 */
.uk-button > span {
	display: block !important;
	text-decoration: none !important;
	box-sizing: content-box !important;
	transition: all 0.2s;
}

.uk-button-wide {
	display: block !important;
	margin: 1em 0;
}

.uk-button-center {
	text-align: center;
}

.uk-button small {
	display: block;
	margin: -0.2em 0 0 0;
	color: inherit;
	text-align: center;
	font-style: normal;
	font-size: 0.8em;
	line-height: 1;
	opacity: 0.7;
}

/* アイコン（図形をCSSで並べる。外部のアイコン集は読み込まない）
   元のプラグインの .su-button i と同じ指定にしてある（1em四方・右に0.5emの余白） */
.uk-button-icon-wrap {
	display: inline-block !important;
	width: 1em;
	height: 1em;
	margin: 0 0.5em 0 0;
	text-align: center;
	line-height: 1em;
	vertical-align: baseline;
}

.uk-button.uk-button-float-icon .uk-button-icon-wrap {
	margin: 0 0.5em;
}

.uk-button-icon {
	width: 100%;
	height: 100%;
	display: block;
}

/* --- ボタンの種類 ------------------------------------------------------ */
/* ⚠️ ここの span はすべて「>」で**直接の子だけ**に限定すること。
      外すと、中のアイコンを包む span にも枠線が付き、
      **アイコンの下に横線が出る**（2026-08-15 実際に出た）。 */

.uk-button-style-default {
	border-width: 1px;
	border-style: solid;
}

.uk-button-style-default > span {
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
}

.uk-button-style-default:hover {
	opacity: 0.7;
}

/* 立体（3d）: 下に太い枠を出して、押すと沈む */
.uk-button-style-3d {
	border-bottom-style: solid;
	border-bottom-width: 6px;
}

.uk-button-style-3d > span {
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

.uk-button-style-3d:hover {
	position: relative;
	top: 3px;
	border-bottom-width: 3px;
}

/* 平面 */
.uk-button-style-flat,
.uk-button-style-flat > span {
	border: none;
}

.uk-button-style-flat > span {
	position: relative;
}

.uk-button-style-flat:hover > span {
	top: 1px;
}

/* 枠だけ */
.uk-button-style-ghost {
	background: transparent !important;
}

.uk-button-style-ghost > span {
	border-width: 3px;
	border-style: solid;
}

/* スマホでは上下の余白を詰める（元のプラグインと同じ） */
@media screen and (max-width: 768px) {
	.uk-button > span {
		padding-top: 0.25em !important;
		padding-bottom: 0.25em !important;
		line-height: 1.2 !important;
	}
	.uk-button small {
		margin-top: 0.2em !important;
	}
}

/* --- 区切り線 ---------------------------------------------------------- */

.uk-divider {
	clear: both;
	border: none;
	text-align: right;
	line-height: 1;
}

.uk-divider a {
	display: inline-block;
	font-size: 0.8em;
	text-decoration: none;
	outline: none;
	padding-bottom: 5px;
}

.uk-divider-style-default { border-bottom-style: solid; }
.uk-divider-style-dotted  { border-bottom-style: dotted; }
.uk-divider-style-dashed  { border-bottom-style: dashed; }
.uk-divider-style-double  { border-bottom-style: double; }