@charset "utf-8";
/* ==========================================================================
   横浜不用品回収サービス｜ヘッダー・フッター・会社概要（オリジナル）
   クラスはすべて yfs- 接頭辞。SWELL 標準のヘッダー・フッターのクラスは使わない。
   PC と SP の切り替えは 960px。
   ========================================================================== */

:root {
	--yfs-main: #0d7096;
	--yfs-main-dark: #0a5574;
	--yfs-main-pale: #eef5f8;
	--yfs-tel: #f5a511;
	--yfs-tel-dark: #de7e00;
	--yfs-ink: #1f2a30;
	--yfs-muted: #55636b;
	--yfs-line: #dbe3e7;
	--yfs-surface: #f6f8f9;
	--yfs-radius: 6px;
	--yfs-dock-h: 0px;
}

.yfs-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 24px;
}
.yfs-wrap--mid { max-width: 1000px; }
.yfs-wrap--narrow { max-width: 860px; }

@media (max-width: 959px) {
	.yfs-wrap { padding-inline: 16px; }
}

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */
.yfs-head {
	position: relative;
	z-index: 100;
	background: #fff;
	color: var(--yfs-ink);
}
.yfs-head a { text-decoration: none; }

.yfs-head__bar { background: var(--yfs-main-dark); }
.yfs-head__catch {
	margin: 0 auto;
	padding-block: 5px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .04em;
	color: #fff;
}

.yfs-head__main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 16px;
}

.yfs-head__logo { margin: 0; line-height: 1.2; }
.yfs-head__logo a { display: grid; gap: 4px; color: var(--yfs-ink); }
.yfs-head__logo-area {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--yfs-main);
}
.yfs-head__logo-name {
	font-size: 26px;
	font-weight: 900;
	letter-spacing: .04em;
}

.yfs-head__cta { display: flex; align-items: stretch; gap: 14px; }

.yfs-head__tel {
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 4px;
	padding-inline: 4px;
	color: var(--yfs-ink);
}
.yfs-head__tel-label {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--yfs-main-dark);
	letter-spacing: .1em;
}
.yfs-head__tel-num {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 30px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: .02em;
	color: var(--yfs-main-dark);
	font-variant-numeric: tabular-nums;
}
.yfs-head__tel-num svg { color: var(--yfs-main); }

.yfs-head__form {
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 2px;
	min-width: 220px;
	padding: 10px 22px;
	border-radius: var(--yfs-radius);
	background: var(--yfs-tel);
	color: #fff;
	transition: background-color .2s;
}
.yfs-head__form:hover { background: var(--yfs-tel-dark); color: #fff; }
.yfs-head__form-sub { font-size: 12px; font-weight: 700; }
.yfs-head__form-main { font-size: 17px; font-weight: 900; letter-spacing: .04em; }

.yfs-head__sp { display: none; }

/* グローバルナビ（PC は段で並べ、スクロールしても上に残す） */
.yfs-nav {
	border-top: 1px solid var(--yfs-line);
	border-bottom: 1px solid var(--yfs-line);
	background: #fff;
}
.yfs-nav__list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
.yfs-nav__item { flex: 1 1 0; }
.yfs-nav__item + .yfs-nav__item a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	height: 22px;
	border-left: 1px solid var(--yfs-line);
	transform: translateY(-50%);
}
.yfs-nav__item a {
	position: relative;
	display: block;
	padding: 17px 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	letter-spacing: .04em;
	color: var(--yfs-ink);
	transition: color .2s;
}
.yfs-nav__item a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -1px;
	width: 0;
	height: 2px;
	background: var(--yfs-main);
	transform: translateX(-50%);
	transition: width .2s;
}
.yfs-nav__item a:hover { color: var(--yfs-main); }
.yfs-nav__item a:hover::after,
.yfs-nav__item.is-current a::after { width: 3em; }
.yfs-nav__item.is-current a { color: var(--yfs-main-dark); }

.yfs-nav__cta { display: none; }

/* PC はヘッダーごと sticky にし、ナビの段だけが画面上端に残るよう上の段の高さぶん上へずらす（高さは JS で --yfs-nav-offset に入れる） */
@media (min-width: 960px) {
	.yfs-head { position: sticky; top: calc(-1 * var(--yfs-nav-offset, 130px)); }
	.admin-bar .yfs-head { top: calc(32px - var(--yfs-nav-offset, 130px)); }
}

/* ヘッダー：SP */
@media (max-width: 959px) {
	.yfs-head {
		position: sticky;
		top: 0;
		border-bottom: 1px solid var(--yfs-line);
	}
	.admin-bar .yfs-head { top: 46px; }
	.yfs-head__bar,
	.yfs-head__cta { display: none; }

	.yfs-head__main { gap: 12px; padding-block: 8px; }
	.yfs-head__logo a { gap: 2px; }
	.yfs-head__logo-area { font-size: 11px; }
	.yfs-head__logo-name { font-size: clamp(16px, 4.6vw, 20px); }

	.yfs-head__sp { display: flex; gap: 6px; flex: none; }
	.yfs-head__sp-btn {
		display: grid;
		justify-items: center;
		align-content: center;
		gap: 3px;
		width: 54px;
		height: 50px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: var(--yfs-radius);
		font: inherit;
		font-size: 11px;
		font-weight: 700;
		line-height: 1;
		color: #fff;
		cursor: pointer;
	}
	.yfs-head__sp-btn--tel { background: var(--yfs-tel); }
	.yfs-head__sp-btn--menu { background: var(--yfs-main); }

	.yfs-head__burger { display: grid; gap: 5px; width: 22px; }
	.yfs-head__burger i {
		display: block;
		height: 2px;
		border-radius: 1px;
		background: currentColor;
		transition: transform .2s, opacity .2s;
	}
	.yfs-head.is-open .yfs-head__burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.yfs-head.is-open .yfs-head__burger i:nth-child(2) { opacity: 0; }
	.yfs-head.is-open .yfs-head__burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* メニューパネル */
	.yfs-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		display: none;
		max-height: calc(100vh - 67px);
		max-height: calc(100dvh - 67px);
		overflow-y: auto;
		border-top: 1px solid var(--yfs-line);
		border-bottom: 1px solid var(--yfs-line);
	}
	.yfs-head.is-open .yfs-nav { display: block; }

	.yfs-nav__list { display: block; }
	.yfs-nav__item + .yfs-nav__item a::before { display: none; }
	.yfs-nav__item { border-bottom: 1px solid var(--yfs-line); }
	.yfs-nav__item a {
		padding: 16px 4px;
		font-size: 15px;
		text-align: left;
	}
	.yfs-nav__item a::after { display: none; }
	.yfs-nav__item.is-current a { color: var(--yfs-main); }

	.yfs-nav__cta {
		display: grid;
		gap: 10px;
		padding-block: 18px 22px;
	}
	.yfs-nav__tel {
		display: grid;
		justify-items: center;
		gap: 4px;
		padding: 12px;
		border-radius: var(--yfs-radius);
		background: var(--yfs-tel);
		color: #fff;
	}
	.yfs-nav__tel-label { font-size: 12px; font-weight: 700; }
	.yfs-nav__tel-num { font-size: 24px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
	.yfs-nav__form {
		display: block;
		padding: 15px 12px;
		border-radius: var(--yfs-radius);
		background: var(--yfs-main);
		font-size: 16px;
		font-weight: 900;
		text-align: center;
		color: #fff;
	}
}

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
.yfs-foot {
	border-top: 1px solid var(--yfs-line);
	background: var(--yfs-main-pale);
	color: var(--yfs-ink);
}
.yfs-foot a { color: inherit; text-decoration: none; }

.yfs-foot__main {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: 40px;
	padding-block: 56px 48px;
}

.yfs-foot__name {
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 900;
	letter-spacing: .04em;
	color: var(--yfs-main-dark);
}
.yfs-foot__info { margin: 0; font-size: 14px; line-height: 1.7; }
.yfs-foot__info > div {
	display: grid;
	grid-template-columns: 6.5em 1fr;
	gap: 8px;
	padding-block: 8px;
	border-top: 1px solid var(--yfs-line);
}
.yfs-foot__info > div:last-child { border-bottom: 1px solid var(--yfs-line); }
.yfs-foot__info dt { font-weight: 700; color: var(--yfs-muted); }
.yfs-foot__info dd { margin: 0; }
.yfs-foot__info a { font-weight: 700; color: var(--yfs-main-dark); }

.yfs-foot__ttl {
	margin: 0 0 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #b9cbd4;
	font-size: 15px;
	font-weight: 900;
	color: var(--yfs-main-dark);
}
.yfs-foot__list { margin: 0; padding: 0; list-style: none; }
.yfs-foot__list a {
	display: block;
	padding: 8px 0;
	font-size: 14px;
	line-height: 1.5;
	transition: color .2s;
}
.yfs-foot__list a:hover { color: var(--yfs-main); text-decoration: underline; text-underline-offset: 3px; }

.yfs-foot__copy { background: var(--yfs-main-dark); }
.yfs-foot__copy p {
	margin: 0 auto;
	padding-block: 14px;
	text-align: center;
	color: #fff;
}
.yfs-foot__copy small { font-size: 12px; letter-spacing: .04em; }
.yfs-foot.has-dock .yfs-foot__copy { padding-bottom: var(--yfs-dock-h); }

@media (max-width: 959px) {
	.yfs-foot__main {
		grid-template-columns: 1fr 1fr;
		gap: 28px 20px;
		padding-block: 40px 32px;
	}
	.yfs-foot__brand { grid-column: 1 / -1; }
	.yfs-foot__name { font-size: 20px; margin-bottom: 12px; }
}
@media (max-width: 420px) {
	.yfs-foot__info > div { grid-template-columns: 5.5em 1fr; }
}

/* 画面下の相談バー */
.yfs-dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	background: rgba(255, 255, 255, .97);
	border-top: 1px solid var(--yfs-line);
}
.yfs-dock__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding-block: 10px;
}
.yfs-dock__msg {
	margin: 0 14px 0 0;
	font-size: 16px;
	font-weight: 900;
	letter-spacing: .04em;
	color: var(--yfs-main-dark);
}
.yfs-dock__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 280px;
	min-height: 56px;
	box-sizing: border-box;
	padding: 6px 16px;
	border-radius: var(--yfs-radius);
	color: #fff;
	text-decoration: none;
	transition: background-color .2s;
}
.yfs-dock__btn:hover { color: #fff; }
.yfs-dock__btn--tel { background: var(--yfs-tel); }
.yfs-dock__btn--tel:hover { background: var(--yfs-tel-dark); }
.yfs-dock__btn--form { background: var(--yfs-main); }
.yfs-dock__btn--form:hover { background: var(--yfs-main-dark); }
.yfs-dock__btn svg { flex: none; }
.yfs-dock__btn-txt { display: grid; justify-items: center; gap: 3px; line-height: 1.15; text-align: center; }
.yfs-dock__btn-sub { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.yfs-dock__btn-main { font-size: 22px; font-weight: 900; letter-spacing: .03em; font-variant-numeric: tabular-nums; }

:root:has(.yfs-dock) { --yfs-dock-h: 77px; }

/* SWELL のページトップボタンを相談バーの上へ逃がす */
:root:has(.yfs-dock) .p-fixBtnWrap { bottom: calc(var(--yfs-dock-h) + 12px); transition: bottom .3s; }

/* PC は画面1枚ぶんスクロールしてから下から出す（SP は常に表示） */
@media (min-width: 960px) {
	.yfs-dock {
		transform: translateY(100%);
		visibility: hidden;
		transition: transform .3s, visibility .3s;
	}
	.yfs-dock.is-shown { transform: none; visibility: visible; }
	:root:has(.yfs-dock:not(.is-shown)) .p-fixBtnWrap { bottom: 16px; }
}

@media (max-width: 959px) {
	.yfs-dock__inner { gap: 8px; padding: 8px; }
	.yfs-dock__msg { display: none; }
	.yfs-dock__btn {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		min-height: 50px;
		gap: 8px;
		padding: 6px;
	}
	.yfs-dock__btn-sub { font-size: 11px; }
	.yfs-dock__btn-main { font-size: clamp(15px, 4.4vw, 19px); }
	:root:has(.yfs-dock) { --yfs-dock-h: 67px; }
}

/* --------------------------------------------------------------------------
   会社概要
   -------------------------------------------------------------------------- */
.yfs-co { color: var(--yfs-ink); }

/* ページ見出し（白地・中央・下に短い線） */
.yfs-co__h1 {
	position: relative;
	margin: 0 0 40px;
	padding: 0 0 15px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	color: #333;
}
.yfs-co__h1::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 60px;
	height: 3px;
	background: var(--yfs-main);
	transform: translateX(-50%);
}
.yfs-co__intro { background: #fff; }

.yfs-co__sec { padding-block: clamp(48px, 7vw, 80px); }
.yfs-co__sec + .yfs-co__sec { border-top: 1px solid var(--yfs-line); }

.yfs-co__h2 {
	margin: 0 0 clamp(28px, 4vw, 40px);
	font-size: clamp(22px, 2.8vw, 28px);
	font-weight: 900;
	line-height: 1.4;
	letter-spacing: .06em;
	text-align: center;
	color: var(--yfs-ink);
}
.yfs-co__h2::after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin: 16px auto 0;
	background: var(--yfs-main);
}

/* 導入 */
.yfs-co__lead {
	margin: 0 0 30px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	color: var(--yfs-main);
}
.yfs-co__text p {
	margin: 0;
	font-size: 16px;
	line-height: 2;
}
.yfs-co__text p + p { margin-top: 1.4em; }

/* 会社概要の表 */
.yfs-co__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border-top: 2px solid var(--yfs-main-dark);
	font-size: 15px;
	line-height: 1.8;
}
.yfs-co__table th,
.yfs-co__table td {
	padding: 18px 20px;
	border: 0;
	border-bottom: 1px solid var(--yfs-line);
	background: none;
	text-align: left;
	vertical-align: top;
}
.yfs-co__table th {
	width: 26%;
	font-weight: 700;
	color: var(--yfs-main-dark);
	background: var(--yfs-surface);
	white-space: nowrap;
}
.yfs-co__table ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.yfs-co__table li { list-style: inherit; }
.yfs-co__table li + li { margin-top: .2em; }
.yfs-co__table a {
	color: var(--yfs-main);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* お約束 */
.yfs-co__promise { background: var(--yfs-surface); }
.yfs-co__promise-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--yfs-line);
	border-radius: var(--yfs-radius);
}
.yfs-co__promise-item {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 16px;
	align-content: start;
	padding: 30px 32px;
}
.yfs-co__promise-item:nth-child(2n) { border-left: 1px solid var(--yfs-line); }
.yfs-co__promise-item:nth-child(n+3) { border-top: 1px solid var(--yfs-line); }
.yfs-co__promise-no {
	grid-row: 1 / span 2;
	font-size: 28px;
	font-weight: 900;
	line-height: 1.1;
	color: var(--yfs-main);
	font-variant-numeric: tabular-nums;
}
.yfs-co__h3 {
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 18px;
	font-weight: 900;
	line-height: 1.5;
	color: var(--yfs-ink);
}
.yfs-co__h3::before,
.yfs-co__h3::after { display: none; }
.yfs-co__promise-item p {
	margin: 0;
	font-size: 15px;
	line-height: 1.9;
	color: #36434a;
}

@media (max-width: 767px) {
	.yfs-co__h1 { font-size: 22px; margin-bottom: 28px; }
	.yfs-co__lead { font-size: 17px; text-align: left; }
	.yfs-co__text p { font-size: 15px; line-height: 1.95; }

	.yfs-co__table,
	.yfs-co__table tbody,
	.yfs-co__table tr,
	.yfs-co__table th,
	.yfs-co__table td { display: block; width: auto; }
	.yfs-co__table th {
		padding: 12px 14px 10px;
		border-bottom: 0;
		white-space: normal;
	}
	.yfs-co__table td { padding: 10px 14px 16px; }

	.yfs-co__promise-list { grid-template-columns: 1fr; }
	.yfs-co__promise-item { padding: 24px 20px; column-gap: 12px; }
	.yfs-co__promise-item:nth-child(2n) { border-left: 0; }
	.yfs-co__promise-item + .yfs-co__promise-item { border-top: 1px solid var(--yfs-line); }
	.yfs-co__promise-no { font-size: 24px; }
	.yfs-co__h3 { font-size: 17px; }

}
.yfs-co__h1 span { display: inline-block; }
.yfs-nw { display: inline-block; }

/* トップページ：SWELL の空の投稿一覧ブロック（上余白64px）がフッターの上に白い帯を作るため余白を消す */
.home .p-homeContent.u-mt-40 { margin-top: 0 !important; }

/* オレンジ（--yfs-tel）の上の文字は紺にする（白文字ではコントラストが足りないため） */
.yfs-head__form, .yfs-head__form:hover,
.yfs-head__sp-btn--tel,
.yfs-nav__tel,
.yfs-dock__btn--tel, .yfs-dock__btn--tel:hover { color: var(--yfs-navy-text, #0b3d5c) !important; }