@charset "UTF-8";
/* ==========================================================================
   老犬老猫ケアノート｜専用ヘッダー（全ページ）
   〜1023px：ロゴ＋さがす＋メニュー（スマホ・タブレット）
   1120px〜：ロゴ＋グローバルナビ＋さがす（PC）／1360px〜：右上ボタンも表示
   ========================================================================== */

/* SWELLのヘッダーを非表示（SWELLは #body_wrap にクラスが付く） */
.rcn-hdr-on #header,
.rcn-hdr-on #fix_header,
.rcn-hdr-on #sp_menu {
	display: none !important;
}

.rcn-hdr,
.rcn-drawer {
	--rcn-main: #c4a882;
	--rcn-ink: #4a3a2a;
	--rcn-teal: #8b6b45;
	--rcn-teal-hover: #74583a;
	--rcn-text: #4d4339;
	--rcn-muted: #85786a;
	--rcn-line: #ece4d8;
	--rcn-bg: #fcfaf6;
	--rcn-mint: #f3ebdf;
	--rcn-mint-deep: #e6d7c1;
	--rcn-peach: #fdebe3;
	--rcn-sky: #e6f0fa;
	--rcn-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
	-webkit-tap-highlight-color: transparent;
}
.rcn-hdr *, .rcn-drawer * { box-sizing: border-box; }
.rcn-hdr .rcn-ico, .rcn-drawer .rcn-ico { width: 1em; height: 1em; flex: none; }
.rcn-hdr a, .rcn-drawer a { text-decoration: none !important; }
.rcn-hdr ul, .rcn-drawer ul { list-style: none; margin: 0; padding: 0; }
.rcn-hdr li::before, .rcn-drawer li::before { content: none; }

/* ---------- ヘッダー本体 ---------- */
.rcn-hdr {
	position: relative;
	z-index: 100;
	width: 100%;
	border-bottom: 1px solid var(--rcn-line);
	transition: box-shadow .25s, background-color .25s;
	font-family: var(--rcn-round);
}
.rcn-hdr--sticky { position: sticky; top: var(--swl-adminbarH, 0px); }
.rcn-hdr--glass {
	background: rgba(252, 250, 246, .88);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
}
.rcn-hdr--white { background: #fff; }
.rcn-hdr--cream { background: var(--rcn-bg); }
.rcn-hdr--mint  { background: var(--rcn-mint); border-bottom-color: var(--rcn-mint-deep); }
.rcn-hdr.is-scrolled { box-shadow: 0 6px 24px rgba(90, 66, 40, .08); border-bottom-color: transparent; }

.rcn-hdr__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 1240px;
	height: 60px;
	margin: 0 auto;
	padding: 0 12px 0 16px;
}

/* ロゴ */
.rcn-hdr__logo { flex: none; margin: 0 !important; padding: 0 !important; font-size: inherit !important; line-height: 1 !important; border: 0 !important; background: none !important; }
.rcn-hdr__logo::before, .rcn-hdr__logo::after { content: none !important; }
.rcn-hdr__logo a { display: flex; align-items: center; gap: 8px; color: var(--rcn-ink) !important; }
.rcn-hdr__logoimg { display: block; width: auto; height: var(--rcn-logo-sp, 34px); max-width: 60vw; object-fit: contain; }
.rcn-hdr__mark { display: block; width: 46px; color: var(--rcn-ink); flex: none; }
.rcn-hdr__mark svg { display: block; width: 100%; height: auto; }
.rcn-hdr__brand { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rcn-hdr__name {
	font-family: var(--rcn-round);
	font-size: 19px; font-weight: 700; letter-spacing: .04em; line-height: 1.2;
	color: var(--rcn-ink);
	white-space: nowrap;
}
.rcn-hdr__tag { display: none; font-size: 11px; font-weight: 500; color: var(--rcn-muted); letter-spacing: .06em; line-height: 1.2; white-space: nowrap; }

/* グローバルナビ（PCのみ） */
.rcn-hdr__nav { display: none; }

/* 右側のボタン */
.rcn-hdr__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.rcn-hdr__btn {
	display: grid; place-items: center;
	width: 44px; height: 44px; margin: 0; padding: 0;
	color: var(--rcn-ink);
	background: var(--rcn-mint);
	border: 0; border-radius: 50%;
	cursor: pointer;
	transition: background-color .2s, transform .12s;
}
.rcn-hdr--mint .rcn-hdr__btn { background: #fff; }
.rcn-hdr__btn .rcn-ico { width: 22px; height: 22px; }
.rcn-hdr__btn:hover { background: var(--rcn-mint-deep); }
.rcn-hdr__btn:active { transform: scale(.94); }
.rcn-hdr__btn:focus-visible, .rcn-hdr a:focus-visible { outline: 3px solid #c4a882; outline-offset: 2px; }
.rcn-hdr__btnlbl {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.rcn-hdr__cta { display: none; }

@media (max-width: 374px) {
	.rcn-hdr__mark { width: 38px; }
	.rcn-hdr__name { font-size: 16px; }
	.rcn-hdr__btn { width: 40px; height: 40px; }
}

/* ---------- PC ---------- */
@media (min-width: 1120px) {
	.rcn-hdr__inner { height: 76px; gap: 16px; padding: 0 24px; }
	.rcn-hdr__logoimg { height: var(--rcn-logo-pc, 44px); max-width: 280px; }
	.rcn-hdr__mark { width: 54px; }
	.rcn-hdr__name { font-size: 21px; }
	.rcn-hdr__tag { display: block; }
	.rcn-hdr__menubtn { display: none; }

	.rcn-hdr__nav { display: block; flex: 1; min-width: 0; }
	.rcn-gnav { display: flex; justify-content: flex-end; flex-wrap: nowrap; gap: 0; }
	.rcn-gnav > li { position: relative; }
	.rcn-gnav > li > a {
		display: flex; align-items: center; gap: 4px;
		height: 44px; padding: 0 11px;
		font-size: 14px; font-weight: 700; letter-spacing: .03em; white-space: nowrap;
		color: var(--rcn-ink) !important;
		border-radius: 999px;
		transition: background-color .2s;
	}
	.rcn-gnav > li > a .ttl { display: contents; }
	.rcn-gnav > li.menu-item-has-children > a::after {
		content: ""; width: 6px; height: 6px; margin: -3px 0 0 4px;
		border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: rotate(45deg); opacity: .55;
	}
	.rcn-gnav > li:hover > a,
	.rcn-gnav > li:focus-within > a,
	.rcn-gnav > li.current-menu-item > a,
	.rcn-gnav > li.current-menu-ancestor > a,
	.rcn-gnav > li.current-category-ancestor > a { background: var(--rcn-mint); }

	.rcn-gnav .sub-menu {
		position: absolute; top: calc(100% + 8px); left: 50%;
		min-width: 230px; padding: 8px;
		background: #fff;
		border-radius: 18px;
		box-shadow: 0 16px 40px rgba(90, 66, 40, .14), 0 2px 6px rgba(90, 66, 40, .06);
		opacity: 0; visibility: hidden;
		transform: translate(-50%, 6px);
		transition: opacity .2s, transform .2s, visibility .2s;
	}
	.rcn-gnav .sub-menu::before {
		content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
	}
	.rcn-gnav > li:hover > .sub-menu,
	.rcn-gnav > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
	.rcn-gnav .sub-menu a {
		display: block; padding: 11px 14px;
		font-size: 14px; font-weight: 700; color: var(--rcn-ink) !important; white-space: nowrap;
		border-radius: 12px;
	}
	.rcn-gnav .sub-menu a .ttl { display: contents; }
	.rcn-gnav .sub-menu a:hover, .rcn-gnav .sub-menu a:focus-visible { background: var(--rcn-mint); }
	.rcn-gnav .sub-menu .sub-menu { display: none; }
}

/* 右上のボタン（入りきらないときはJSで .no-cta を付けて隠す） */
@media (min-width: 1120px) {
	.rcn-hdr__cta {
		display: inline-flex; align-items: center; gap: 6px;
		height: 44px; padding: 0 20px;
		font-size: 14px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
		color: #fff !important;
		background: var(--rcn-teal);
		border-radius: 999px;
		box-shadow: 0 6px 16px rgba(139, 107, 69, .22);
		transition: background-color .2s, transform .2s;
	}
	.rcn-hdr__cta .rcn-ico { width: 18px; height: 18px; }
	.rcn-hdr__cta:hover { background: var(--rcn-teal-hover); transform: translateY(-1px); }
}

/* ==========================================================================
   ドロワー（メニュー）
   ========================================================================== */
.rcn-drawer { position: fixed; inset: 0; z-index: 10001; font-family: var(--rcn-round); }
.rcn-drawer[hidden] { display: none; }
.rcn-drawer.is-closing { pointer-events: none; }
.rcn-drawer__backdrop {
	position: absolute; inset: 0;
	background: rgba(52, 40, 28, .38);
	animation: rcn-dfade .25s ease both;
}
.rcn-drawer__panel {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: min(88vw, 400px);
	overflow-y: auto; overscroll-behavior: contain;
	background: var(--rcn-bg);
	padding: 0 18px calc(28px + env(safe-area-inset-bottom));
	box-shadow: -12px 0 40px rgba(0, 0, 0, .12);
	animation: rcn-din .32s cubic-bezier(.2, .8, .2, 1) both;
	color: var(--rcn-text);
	font-size: 15px; line-height: 1.6;
}
.rcn-drawer.is-closing .rcn-drawer__panel { animation: rcn-dout .22s ease both; }
.rcn-drawer.is-closing .rcn-drawer__backdrop { animation: rcn-dfade .22s ease reverse both; }
@keyframes rcn-din { from { transform: translateX(100%); } }
@keyframes rcn-dout { to { transform: translateX(100%); } }
@keyframes rcn-dfade { from { opacity: 0; } }

.rcn-drawer__head {
	position: sticky; top: 0; z-index: 1;
	display: flex; align-items: center; justify-content: space-between;
	height: 64px; margin: 0 -18px 8px; padding: 0 12px 0 18px;
	background: rgba(252, 250, 246, .95);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.rcn-drawer__brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--rcn-ink); }
.rcn-drawer__brand .rcn-hdr__mark { width: 40px; }
.rcn-drawer__close {
	display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
	color: var(--rcn-ink); background: var(--rcn-mint); border: 0; border-radius: 50%; cursor: pointer;
}
.rcn-drawer__close .rcn-ico { width: 22px; height: 22px; }

.rcn-drawer__search { display: flex; gap: 8px; margin: 0 0 16px; }
.rcn-drawer__search input[type="search"] {
	flex: 1; min-width: 0; height: 48px; margin: 0; padding: 0 16px;
	font-size: 16px; color: #333; background: #fff;
	border: 2px solid var(--rcn-line); border-radius: 999px;
	-webkit-appearance: none; appearance: none; box-shadow: none;
}
.rcn-drawer__search input[type="search"]:focus { border-color: var(--rcn-ink); outline: none; }
.rcn-drawer__search button {
	flex: none; width: 48px; height: 48px; padding: 0; display: grid; place-items: center;
	color: #fff; background: var(--rcn-teal); border: 0; border-radius: 50%; cursor: pointer;
}
.rcn-drawer__search button .rcn-ico { width: 20px; height: 20px; }

.rcn-drawer__features { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rcn-drawer__feature {
	display: flex; flex-direction: column; gap: 8px;
	padding: 14px;
	font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--rcn-ink) !important;
	border-radius: 18px;
	transition: transform .15s;
}
.rcn-drawer__feature:active { transform: scale(.97); }
.rcn-drawer__feature small { display: block; font-size: 11px; font-weight: 700; color: var(--rcn-muted); }
.rcn-drawer__feature--sky { background: var(--rcn-sky); }
.rcn-drawer__feature--peach { background: var(--rcn-peach); }
.rcn-drawer__ficon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .8); }
.rcn-drawer__ficon .rcn-ico { width: 22px; height: 22px; }

.rcn-drawer__label { margin: 22px 0 6px !important; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--rcn-muted); }

.rcn-dnav { background: #fff; border-radius: 18px; padding: 4px 6px; box-shadow: 0 2px 12px rgba(90, 66, 40, .05); }
.rcn-dnav > li { position: relative; border-bottom: 1px solid var(--rcn-line); }
.rcn-dnav > li:last-child { border-bottom: 0; }
.rcn-dnav > li > a {
	display: flex; align-items: center;
	min-height: 54px; padding: 8px 52px 8px 12px;
	font-size: 16px; font-weight: 700; color: var(--rcn-ink) !important;
}
.rcn-dnav a .ttl { display: contents; }
.rcn-dnav__toggle {
	position: absolute; right: 6px; top: 7px;
	display: grid; place-items: center;
	width: 40px; height: 40px; padding: 0;
	color: var(--rcn-ink); background: var(--rcn-mint); border: 0; border-radius: 50%; cursor: pointer;
}
.rcn-dnav__toggle .rcn-ico { width: 18px; height: 18px; transition: transform .25s; }
.rcn-dnav__toggle[aria-expanded="true"] .rcn-ico { transform: rotate(180deg); }
.rcn-dnav .sub-menu { display: none; padding: 0 6px 10px; }
.rcn-dnav li.is-open > .sub-menu { display: block; }
.rcn-dnav .sub-menu a {
	display: flex; align-items: center; gap: 8px;
	min-height: 46px; padding: 8px 12px;
	font-size: 14px; font-weight: 700; color: var(--rcn-text) !important;
	background: var(--rcn-bg); border-radius: 12px; margin-top: 4px;
}
.rcn-dnav .sub-menu a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rcn-main); flex: none; }
.rcn-dnav .sub-menu .sub-menu { display: none !important; }

.rcn-drawer__links { display: grid; gap: 4px; margin-top: 18px; }
.rcn-drawer__links a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; font-size: 14px; font-weight: 700; color: var(--rcn-muted) !important; }
.rcn-drawer__links .rcn-ico { width: 18px; height: 18px; }

.rcn-drawer .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

html.rcn-drawer-open, html.rcn-drawer-open body { overflow: hidden; }

/* PCでシートを開いたときは画面中央に */
@media (min-width: 960px) {
	.rcn-sheet { align-items: flex-start; padding-top: 12vh; }
	.rcn-sheet__panel { border-radius: 24px; animation-name: rcn-sheet-pop; }
	.rcn-sheet__grip { display: none; }
	@keyframes rcn-sheet-pop { from { opacity: 0; transform: translateY(-12px); } }
}

@media (prefers-reduced-motion: reduce) {
	.rcn-hdr, .rcn-drawer__panel, .rcn-drawer__backdrop, .rcn-gnav .sub-menu { transition: none !important; animation: none !important; }
}

/* ロゴ・メニュー・ボタンが入りきらないとき（JSで判定）
   1段階目：右上ボタンを隠す　2段階目：メニューをドロワーに切り替え */
@media (min-width: 1120px) {
	.rcn-hdr.no-cta .rcn-hdr__cta { display: none; }
	.rcn-hdr.is-compact .rcn-hdr__nav { display: none; }
	.rcn-hdr.is-compact .rcn-hdr__menubtn { display: grid; }
	.rcn-hdr.is-compact .rcn-hdr__actions { margin-left: auto; }
	.rcn-hdr__nav { overflow: hidden; }
	.rcn-hdr.is-fit .rcn-hdr__nav { overflow: visible; }
}

/* メインカラーのアクセント */
.rcn-hdr__tag { color: #8b6b45; }
@media (min-width: 1120px) {
	.rcn-gnav > li.current-menu-item > a,
	.rcn-gnav > li.current-menu-ancestor > a,
	.rcn-gnav > li.current-category-ancestor > a { box-shadow: inset 0 -2px 0 var(--rcn-main); }
}