@charset "utf-8";
/*ボタン*/
/*linkbtnと色、形状、サイズをクラス名で指定可*/

main .wp-block-buttons{
.linkbtn .wp-block-button__link{
    width: fit-content;
    margin: 0 auto;
    padding: 0.5em 2em;
    background: var(--btn-back-color);
    color: var(--btn-text-color);
    border-width: 2px;
    border-style: solid;
    border-color: var(--btn-border-color);
    transition: 0.3s;
    display: block;
	
	&:hover{
    background: var(--btn-text-color);
    color: var(--btn-back-color);
    border-color: var(--btn-border-color);
	}
	}
}
header,footer{ 
.linkbtn{
    width: fit-content;
    margin: 1em auto 1.5em;
    padding: 0.5em 2em;
    background: var(--btn-back-color);
    color: var(--btn-text-color);
    border-width: 2px;
    border-style: solid;
    border-color: var(--btn-border-color);
    transition: 0.3s;
    display: block;
	&:hover{
    background: var(--btn-text-color);
    color: var(--btn-back-color);
    border-color: var(--btn-border-color);
	}
	}
}

/*ボタン*/
/*linkbtnと色、形状、サイズをクラス名で指定可*/

.linkbtn {
    width: fit-content;
    margin: 1em auto 1.5em;
    padding: 0.5em 2em;
    background: var(--btn-back-color);
    color: var(--btn-text-color);
    border-width: 2px;
    border-style: solid;
    border-color: var(--btn-border-color);
    transition: 0.3s;
    display: block;
}

.linkbtn:hover {
    background: var(--btn-text-color);
    color: var(--btn-back-color);
    border-color: var(--btn-border-color);
}

/*色*/
.btn_white {
    --btn-back-color: #fff;
    --btn-border-color: var(--maincolor);
    --btn-text-color: var(--maincolor);
}

.btn_color {
    --btn-back-color: var(--maincolor);
    --btn-border-color: var(--maincolor);
    --btn-text-color: #fff;
}

.btn_subcolor {
    --btn-back-color: var(--subcolor);
    --btn-border-color: var(--subcolor);
    --btn-text-color: #fff;
}

.btn_line {
    --btn-back-color: var(--line-color);
    --btn-border-color: var(--line-color);
    --btn-text-color: #fff;
}

/*形*/
.btn_max_round {
    border-radius: 3em;
}

.btn_min_round {
    border-radius: 0.5em;
}

/*サイズ*/
.btn_small {
    font-size: 80%;
    padding: 0.5em 1.5em;
}

.btn_big {
    font-size: 115%;
    padding: 0.5em 5em;
}

.btn_wide {
    width: 100%;
    text-align: center;
}

/*ここまで*/

main .wp-block-buttons.btn_group{
    width: 60%;
    max-width: 500px;
    margin: 1em auto;
    .linkbtn{
        margin:0;
        text-align: center;
        padding: 0.5em 0;
		
		.wp-block-button__link{
			width:100%;
		}
    }
}


.img_btn{
    position: relative;
	overflow:hidden;
	display:block;
	min-height:auto;
	padding:0;
	
	.wp-block-cover__image-background{
		position:static;
	}
	.wp-block-cover__inner-container{
        position: absolute;
        text-align: center;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        color: var(--white);
        font-size: 140%;
        font-family: var(--klee);
        width: 100%;
		height:100%;
		p{height:100%;}
		a{
			display:flex;
			width:100%;
			height:100%;
			justify-content:center;
			align-items:center;
			color:var(--white);
		}
    }
	
	.wp-block-cover__background{
		transition:0.3s;
    }
	&:hover{
		.wp-block-cover__background{
			opacity:0.2;
		}
    }
}