/*Settings*/
.btn {
	display: inline-flex;
	position: relative;
	font-size: var(--font-base);
	line-height: 1.5;
	letter-spacing: 0.06em;
	border-radius: var(--border-radius-medium);
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	transition: var(--animation-speed); 
}	
.c-btn {
	display: inline-block;
	position: relative;
	border-radius: 100%;
	transition: var(--animation-speed);
}
	.btn::after,
	.c-btn::after,
	.left-icon::before {
		display: inline-block;
		position: absolute;
		line-height: 1;
	}
.btn-small {
	font-size: var(--font-small);
	border-radius: 8px;	
	justify-content: flex-start;
}
.btn-left {
	justify-content: left;
}
/*Befor/After img*/
.btn-arrow::after,
.c-btn::after {
	content: url("/share/im/ui/arrow.svg"); 
}
	.btn-arrow.btn-secondary::after,
	.btn-arrow.btn-secondary:hover::after,
	.btn-arrow.btn-white:active::after,
	.btn-arrow.btn-white:focus::after {
		content: url("/share/im/ui/arrow-w.svg");
	}
	.btn-arrow.btn-secondary:active::after,
	.btn-arrow.btn-secondary:focus::after {
		content: url("/share/im/ui/arrow-p.svg"); 
	}
.btn-new-window::after {
	content: url("/share/im/ui/new-window.svg");
}
	.btn-new-window.btn-secondary::after,
	.btn-new-window.btn-secondary:hover::after,
	.btn-new-window.btn-white:active::after,
	.btn-new-window.btn-white:focus::after {
		content: url("/share/im/ui/new-window-w.svg");
	}
	.btn-new-window.btn-secondary:focus::after,
	.btn-new-window.btn-secondary:active::after {
		content: url("/share/im/ui/new-window-p.svg");
	}
.i-new-patients::before {
	content: url("/share/im/ui/new-patients.svg");
}
.i-emergency-dentistry::before {
	content: url("/share/im/ui/emergency-dentistry.svg");
}
.i-yoyaku::before {
	content: url("/share/im/ui/yoyaku.svg");
}
.i-contact::before {
	content: url("/share/im/ui/contact.svg");
}
.i-access::before {
	content: url("/share/im/ui/access.svg");
}
.i-parking::before {
	content: url("/share/im/ui/parking.svg");
}
.i-click::before {
	content: url("/share/im/ui/click.svg");
}
.i-clock::before {
	content: url("/share/im/ui/clock.svg");
}
.i-taisaku::before {
	content: url("/share/im/ui/taisaku.svg");
}
.i-tel::before {
	content: url("/share/im/ui/tel.svg");
}
.i-tel-w::before {
	content: url("/share/im/ui/tel-w.svg");
}

/*button color*/
.btn {
	color: var(--color-primary);
}
.btn-primary {
	background-color: var(--color-accent-b);
}
	.btn-primary:hover {
		background-color: var(--color-btn-primary-hover);
	}
	.btn-primary:active,
	.btn-primary:focus {
		background-color: transparent;
		border: 1.5px solid var(--color-btn-primary-hover);
	}
body .btn-secondary {
	background-color: var(--color-bg-04);
	color: #FFFFFF;
}
	body .btn-secondary::after {
		color: #FFFFFF;
	}
	.btn-secondary:hover {
		background-color: var(--color-btn-secondary-hover);
	}
	.btn-secondary:active,
	.btn-secondary:focus {
		background-color: transparent;
		border: 1.5px solid var(--color-btn-secondary-hover);
		color: var(--color-btn-secondary-hover);
	}
.btn-tertiary,
.c-btn {
	background-color: var(--color-btn-tertiary-bg);
}
	.btn-tertiary:hover,
	.articles-control .bt.block.ankerlink:hover,
	#csec169034027066 .articles.textile li .title:hover::before,
	.c-btn:hover {
		background-color: var(--color-btn-tertiary-hover);
	}
	.btn-tertiary:active,
	.btn-tertiary:focus,
	.articles-control .bt.block.ankerlink:active,
	.articles-control .bt.block.ankerlink:focus,
	#csec169034027066 .articles.textile li .title:active::before,
	#csec169034027066 .articles.textile li .title:focus::before,
	.c-btn:active,
	.c-btn:focus {
		background-color: transparent;
		border: 1.5px solid var(--color-btn-tertiary-hover);
	}
.btn-white {
	background-color: #FFFFFF;
}
	.btn-white:hover {
		background-color: var(--color-btn-tertiary-hover);
	}
	html .btn-white:active,
	html .btn-white:focus {
		background-color: var(--color-primary);
		color: #FFFFFF;
	}

/*button size & icon size*/
.c-btn {
	width: 2em;
	height: 30px;
}
	.c-btn::after {
		width: 1em;
		height: 1em;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
.left-icon::before {
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
}
.btn-left {
	padding-left: 55px;
}
.btn {
	height: 70px;
	width: 260px;
}
	.btn::before {
		top: 50%;
		left: 10px;
		width: var(--icon-l2);
		height: var(--icon-l2);
		transform: translate(0, -50%);
	}
	.btn::after {
		top: 50%;
		right: 15px;
		width: var(--icon-r2);
		height: var(--icon-r2);
		transform: translate(0, -50%);
	}
.btn-large {
	height: 80px;
}
	.btn-large::before {
		width: var(--icon-l1);
		height: var(--icon-l1);	
	}
	.btn-large::after {
		width: var(--icon-r1);
		height: var(--icon-r1);
	}
.btn-medium {
	height: 60px;
}
	.btn-medium::after {
		width: var(--icon-r2);
		height: var(--icon-r2);
	}
.btn-small {
	height: 50px;
}
	.btn-small::after {
		width: var(--icon-r2);
		height: var(--icon-r2);
	}
/**/
#csec169034027066 .articles-control .bt.ankerlink {
	
}
@media screen and (min-width: 751px) {
	
}

@media screen and (max-width: 750px) {
	.btn {
		font-size: 15px;
	}
	.btn-large {
		height: 70px;
	}
		.btn-large::before {
			width: var(--icon-l1-sp);
			height: var(--icon-l1-sp);	
		}
		.btn-large::after {
			width: var(--icon-r2);
			height: var(--icon-r2);
		}	
	.btn-small {
		font-size: 13px;
		border-radius: var(--border-radius-xsmall);
	}		
}
			



