/* =========================================
   Component / 共通パーツ
========================================= */

.button{
	display:inline-block;
	padding:15px 48px;
	background:var(--color-main);
	color:#fff;
	border-radius:var(--radius-full);
	transition:.3s;
}

.button:hover{
	opacity:.8;
}

.button-outline{
	background:transparent;
	color:var(--color-main);
	border:1px solid var(--color-main);
}

.button-outline:hover{
	background:var(--color-main);
	color:#fff;
	opacity:1;
}

.card{
	background:#fff;
	border:1px solid var(--color-border);
	border-radius:var(--radius);
	padding:20px;
	box-shadow:var(--shadow);
}

/* =========================================
   GRM 共通ボタンスタイル：小さめ・細字・アウトライン
   ・grm-worksの「ホームページを見る」ボタンと同じデザイン
   ・グーテンベルクの「ボタン」ブロックの「詳細設定」→
	 「追加CSSクラス」欄に "grm-btn-outline-sm" と入力すると
	 このスタイルが適用されます。
========================================= */
.wp-block-button.grm-btn-outline-sm .wp-block-button__link{
	display:inline-block;
	padding:7px 16px !important;
	border:1px solid #999 !important;
	border-radius:999px !important;
	font-size:12px !important;
	font-weight:400 !important;
	letter-spacing:.03em;
	color:#666 !important;
	background:#fff !important;
	text-decoration:none;
	transition:.2s;
}

.wp-block-button.grm-btn-outline-sm .wp-block-button__link:hover{
	background:#f2f2f2 !important;
	color:#222 !important;
	border-color:#222 !important;
}

/* =========================================
   ・グーテンベルクの画像の角丸をなくす
========================================= */
.wp-block-image img{
	border-radius:0 !important;
}