/*
Theme Name: SWELL Child
Theme URI: https://carsalonlegare.com
Template: swell
Version: 1.0.0
Description: Car Salon Legare カスタム子テーマ
Author: Zentra
*/

/* =========================================================
   PC ヘッダー電話案内（head_box ウィジェット）
   ========================================================= */
.csl-header-tel { display: flex; align-items: center; height: 100%; }
.csl-header-tel__link {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--color_text, #222);
	line-height: 1.15;
	transition: opacity .2s;
}
.csl-header-tel__link:hover { opacity: .8; }
.csl-header-tel__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--color_main, #FF6600);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6.62 10.79a15.53 15.53 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.57 1 1 0 0 1-.24 1.02l-2.21 2.2Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px;
}
.csl-header-tel__body { display: flex; flex-direction: column; }
.csl-header-tel__num {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: .01em;
	font-family: "Helvetica Neue", Arial, sans-serif;
}
.csl-header-tel__hours { font-size: 11px; color: #777; margin-top: 2px; }

/* =========================================================
   SP フローティング電話バー（wp_footer 出力・JS制御）
   ========================================================= */
.csl-spbar { display: none; }

@media (max-width: 959px) {
	.csl-spbar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9990;
		gap: 0;
		box-shadow: 0 -2px 12px rgba(0,0,0,.18);
		transform: translateY(110%);
		transition: transform .3s ease;
		will-change: transform;
	}
	.csl-spbar.is-show { transform: translateY(0); }

	/* 電話ボタン（主役・オレンジ） */
	.csl-spbar__tel {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 11px 8px;
		background: var(--color_main, #FF6600);
		color: #fff;
		text-decoration: none;
	}
	.csl-spbar__icon {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border-radius: 50%;
		background: rgba(255,255,255,.18);
	}
	.csl-spbar__icon svg { width: 24px; height: 24px; }
	.csl-spbar__txt { display: flex; flex-direction: column; line-height: 1.2; }
	.csl-spbar__lead { font-size: 11px; opacity: .95; }
	.csl-spbar__num {
		font-size: 23px;
		font-weight: 700;
		letter-spacing: .02em;
		font-family: "Helvetica Neue", Arial, sans-serif;
	}

	/* メール相談ボタン（副・ダーク） */
	.csl-spbar__form {
		flex: 0 0 84px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		padding: 8px 4px;
		background: #333;
		color: #fff;
		text-decoration: none;
		font-size: 12px;
		line-height: 1.2;
		text-align: center;
	}
	.csl-spbar__formIcon { font-size: 18px; }

	/* バー分の下部余白を確保（フッターと重ならないよう） */
	body { padding-bottom: 0; }
}

/* =========================================================
   料金ページ：車種サイズ検索ツール（[csl_carsize_search]）
   ========================================================= */
.csl-carsearch {
	max-width: 680px;
	margin: 1.5rem auto;
	padding: 1.5rem;
	background: #fff;
	border: 2px solid var(--color_main, #FF6600);
	border-radius: 12px;
}
.csl-carsearch__label {
	display: block;
	font-weight: 600;
	margin-bottom: .6rem;
	font-size: .95rem;
}
.csl-carsearch__input {
	width: 100%;
	padding: .75rem 1rem;
	font-size: 16px;
	border: 1px solid #ccc;
	border-radius: 8px;
	box-sizing: border-box;
}
.csl-carsearch__suggest {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: .5rem;
}
.csl-carsearch__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: .6rem .9rem;
	background: #f7f7f7;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: .95rem;
	text-align: left;
	transition: background .15s;
}
.csl-carsearch__item:hover { background: #ffe9d9; }
.csl-carsearch__itemsize {
	flex: 0 0 auto;
	font-weight: 700;
	color: var(--color_main, #FF6600);
	margin-left: 1rem;
}
.csl-carsearch__empty { padding: .6rem .9rem; color: #777; font-size: .9rem; }
.csl-carsearch__result {
	margin-top: 1.2rem;
	padding-top: 1.2rem;
	border-top: 1px dashed #ddd;
}
.csl-carsearch__car { font-size: 1.05rem; margin-bottom: .8rem; }
.csl-carsearch__size {
	display: inline-block;
	font-size: 1.3rem;
	font-weight: 700;
	color: #fff;
	background: var(--color_main, #FF6600);
	padding: .1em .6em;
	border-radius: 6px;
	margin: 0 .2em;
}
.csl-carsearch__table {
	width: 100%;
	border-collapse: collapse;
	margin: .8rem 0;
}
.csl-carsearch__table th,
.csl-carsearch__table td {
	border: 1px solid #e0e0e0;
	padding: .55rem .8rem;
	text-align: left;
	font-size: .95rem;
}
.csl-carsearch__table th { background: #f3f3f3; }
.csl-carsearch__table td:last-child { font-weight: 700; white-space: nowrap; }
.csl-carsearch__quote { font-size: .9rem; line-height: 1.6; margin: .6rem 0; }
.csl-carsearch__cta { text-align: center; margin-top: 1rem; }
.csl-carsearch__note { font-size: .82rem; color: #888; margin-top: 1rem; line-height: 1.6; }

/* =========================================================
   PC 右端 追従SNS/CTAフローティング（.csl-sidefloat）
   ========================================================= */
.csl-sidefloat { display: none; }

@media (min-width: 960px) {
	.csl-sidefloat {
		display: flex;
		flex-direction: column;
		gap: 2px;
		position: fixed;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		z-index: 9980;
	}
	.csl-sidefloat__btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		width: 62px;
		padding: 12px 4px;
		color: #fff;
		text-decoration: none;
		font-size: 11px;
		font-weight: 600;
		line-height: 1.2;
		text-align: center;
		border-radius: 8px 0 0 8px;
		transition: opacity .2s, transform .2s;
	}
	.csl-sidefloat__btn:hover { opacity: .88; transform: translateX(-3px); }
	.csl-sidefloat__btn.-line  { background: #06C755; }
	.csl-sidefloat__btn.-insta { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
	.csl-sidefloat__btn.-form  { background: #333; }
	.csl-sidefloat__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22px;
		line-height: 1;
	}
	.csl-sidefloat__icon svg { width: 28px; height: 28px; }
}

/* SPバーの LINE ボタン（緑） */
@media (max-width: 959px) {
	.csl-spbar__line {
		flex: 0 0 78px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		padding: 8px 4px;
		background: #06C755;
		color: #fff;
		text-decoration: none;
		font-size: 12px;
		line-height: 1.2;
		text-align: center;
	}
	.csl-spbar__line svg { width: 22px; height: 22px; }
}