@charset "utf-8";

/* ================================================================
   以下、Builder で選択したパーツのCSS（自動連結）
   ================================================================ */

/* ---- アニメーションボタン（btn5） (btn5) ---- */
/*ボタン（btn5）
---------------------------------------------------------------------------*/
/*ボタン共通*/
.btn5-parts {
    display: flex;
  align-items: center;
  justify-content: center;
}
.btn5-parts a {
	display: block;
	text-decoration: none;
	text-align: center;
	border-radius: 5px;	/*角を丸く*/
	position: relative;
	overflow: hidden;
	padding: 0.2rem 0.5rem;	/*上下に0.5文字分、左右に2文字分の余白*/
	background: #6699ff;	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: #fff;	/*文字色。theme.cssのbg-colorを読み込みます。*/
    width: 100%;
}

.btn5-parts a span {
	position: relative;
	z-index: 1;
}

/*hover時に重なる背景*/
.btn5-parts a::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #6699ff;
	color: #fff;
	filter: brightness(1.2);	/*明るくする*/
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;	/*0.3sが速度。お好みで。*/
}
.btn5-parts a:hover::before {transform: scaleX(1);}
.btn5-parts a:hover {border-color: transparent;}

/*テキスト量にあったサイズ用*/
.btn5-parts.fit {
	width: fit-content;
}

/*テキスト量にあったサイズ用の左右中央用*/
.btn5-parts.fit.c {
	margin: 0 auto;
    color: #fff;
}

/*色違い（primary）*/
.btn5-parts.primary a {
	background: #6699ff;	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: #fff;	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
    width: 20%;
    margin-bottom: 10px;
}
.btn5-parts.primary a::before {
	background: #6699ff;
	color: #fff;
}

/*色違い（accent）*/
.btn5-parts.accent a {
	background: #999999;	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: #fff;	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
    width: 20%;
}
.btn5-parts.accent a::before {
	background: #999999;
	color: #fff;
}


/*画面幅700px以下の追加指定*/
@media (max-width:700px) {
    .btn5-parts a {
        width: 150%;
        margin: 5%;
}
       /*色違い（primary）*/
    .btn5-parts.primary a {
        background: #6699ff;	/*背景色。theme.cssのprimary-colorを読み込みます。*/
        color: #fff;	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
        width: 50%;
    }
    .btn5-parts.primary a::before {
        background: #6699ff;
        color: #fff;
    }

    /*色違い（accent）*/
    .btn5-parts.accent a {
        background: #999999;	/*背景色。theme.cssのaccent-colorを読み込みます。*/
        color: #fff;	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
        width: 50%;
    }
    .btn5-parts.accent a::before {
        background: #999999;
        color: #fff;
    }