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

/* =========================================
   ポップアップ（.grm-popup）
   ・リンクに data-grm-popup を付けると本文をポップアップ表示
     （assets/js/popup.js）
========================================= */
html.grm-popup-open{
	overflow:hidden;
}
.grm-popup{
	position:fixed;
	inset:0;
	z-index:100000;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:40px 20px;
	background:rgba(0,0,0,.6);
	box-sizing:border-box;
}
.grm-popup[hidden]{
	display:none;
}
.grm-popup-box{
	position:relative;
	width:100%;
	max-width:800px;
	max-height:100%;
	overflow-y:auto;
	padding:48px 48px 40px;
	background:#fff;
	border-radius:var(--radius);
	box-sizing:border-box;
	outline:none;
}
.grm-popup-title{
	margin:0 0 28px;
	font-size:22px;
	line-height:1.5;
}
.grm-popup-body{
	font-size:14px;
	line-height:2;
}
.grm-popup-close{
	position:absolute;
	top:16px;
	right:16px;
	width:40px;
	height:40px;
	border:0;
	border-radius:50%;
	background:transparent;
	cursor:pointer;
}
.grm-popup-close::before,
.grm-popup-close::after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:20px;
	height:1px;
	background:var(--color-main);
}
.grm-popup-close::before{
	transform:translate(-50%,-50%) rotate(45deg);
}
.grm-popup-close::after{
	transform:translate(-50%,-50%) rotate(-45deg);
}
@media (max-width: 767px){
	.grm-popup{
		padding:20px 12px;
	}
	.grm-popup-box{
		padding:40px 20px 28px;
	}
}