@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/



/* --------------------------------------------------
ヘッダー: vl-header-btn
-------------------------------------------------- */
.vl-header-btn {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

/* リンクボタン：aタグ自体をflexにして中身を整列 */
.vl-header-btn__link {
	display: flex;
	align-items: center;
	justify-content: center;
	/* アイコンと文字の間隔は gap で調整（margin不要） */
	gap: 8px; 

	width: 50%;
	padding: 12px 10px;
	text-decoration: none;
	color: #ffffff;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
	transition: opacity 0.3s ease;
	border-radius: 2px;
}

.vl-header-btn__link:hover {
	opacity: 0.85;
}

/* Modifier: 電話ボタン */
.vl-header-btn__link--tel {
	background-color: #8a3c3c;
}

/* Modifier: お問い合わせボタン */
.vl-header-btn__link--contact {
	background-color: #54786c;
}

/* スマホ向けの微調整 */
@media screen and (max-width: 480px) {
	.vl-header-btn {
		gap: 5px;
	}
	.vl-header-btn__link {
		font-size: 13px;
		padding: 10px 5px;
		gap: 5px; /* スマホでは間隔を少し狭く */
	}
}