/* ヘッダー */
.ck-header {
	background: var(--ck-color-white);
	border-bottom: 1px solid var(--ck-color-border-soft);
	position: sticky;
	top: 0;
	z-index: 100;
}

/* ログイン中はWP管理バー(position:fixed)が画面最上部を占有しているため、
   sticky追従時にヘッダーが管理バーの下に潜り込んで文字が重なってしまう。
   管理バーの高さぶんだけ追従位置をずらす(PC=32px / 782px以下=46px、WP標準の管理バー高さ)。 */
body.admin-bar .ck-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .ck-header {
		top: 46px;
	}
}

.ck-header__inner {
	max-width: var(--ck-container-max-width);
	margin: 0 auto;
	padding: 14px var(--ck-container-padding);
	display: flex;
	align-items: center;
	gap: 28px;
}

.ck-header__logo a {
	display: flex;
	align-items: center;
}

/* カスタムロゴ画像(the_custom_logo())は元画像の実サイズでそのまま出力されるため、
   ヘッダーの高さに収まるよう明示的に上限を指定する(本番の実ロゴは1165x373pxあった)。 */
.ck-header__logo img {
	display: block;
	max-height: 52px;
	max-width: 100%;
	width: auto;
}

.ck-header__site-title {
	font-family: var(--ck-font-display);
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--ck-color-black);
	white-space: nowrap;
}

.ck-header__logo {
	flex: 0 0 auto;
}

/* ---------- カテゴリーnav行(ヘッダー2段目) ----------
   ブランドカテゴリー数が8件あり、ロゴ・検索・カート等と同じ行に収めると
   幅の奪い合いでロゴが極端に潰れる不具合が起きたため、専用の全幅の行に分けた。 */
.ck-header__nav-row {
	border-top: 1px solid var(--ck-color-border-soft);
	background: var(--ck-color-bg-soft);
}

.ck-header__nav-row-inner {
	max-width: var(--ck-container-max-width);
	margin: 0 auto;
	padding: 0 var(--ck-container-padding);
}

.ck-header__nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
}

/* ドロップダウンをposition:absoluteで出すため、liを基準点にする。
   nav-row-inner側はoverflow-x:autoにしない(overflowの祖先はposition:absoluteの
   ドロップダウンを切り取ってしまうため)。カテゴリー数がさらに増えた場合はここが
   横スクロールではなく折り返しで受ける。 */
.ck-header__nav-item {
	position: relative;
}

.ck-header__nav-list a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 13px 16px;
	color: var(--ck-color-text);
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease-out, border-color 0.15s ease-out;
}

.ck-header__nav-list a:hover {
	color: var(--ck-color-primary);
	border-color: var(--ck-color-primary);
}

.ck-header__nav-caret {
	font-size: 0.6rem;
	color: var(--ck-text-4);
	transition: transform 0.15s ease-out;
}

.ck-header__nav-item.has-dropdown:hover .ck-header__nav-caret,
.ck-header__nav-item.has-dropdown:focus-within .ck-header__nav-caret {
	transform: rotate(180deg);
	color: var(--ck-color-primary);
}

/* ---------- ドロップダウン(子・孫カテゴリ) ---------- */
.ck-header__dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--ck-color-white);
	border-radius: 0 0 var(--ck-radius-card) var(--ck-radius-card);
	box-shadow: var(--ck-shadow-card);
	padding: 10px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0.15s;
	z-index: 200;
}

.ck-header__nav-item.has-dropdown:hover .ck-header__dropdown,
.ck-header__nav-item.has-dropdown:focus-within .ck-header__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ck-header__dropdown-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ck-header__dropdown-list > li > a {
	display: block;
	padding: 8px 20px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ck-text-1);
	white-space: nowrap;
}

.ck-header__dropdown-list > li > a:hover {
	color: var(--ck-color-primary);
	background: var(--ck-color-bg-soft);
}

.ck-header__dropdown-sublist {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
}

.ck-header__dropdown-sublist a {
	display: block;
	padding: 6px 20px 6px 32px;
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--ck-text-3);
	white-space: nowrap;
}

.ck-header__dropdown-sublist a:hover {
	color: var(--ck-color-primary);
	background: var(--ck-color-bg-soft);
}

@media (max-width: 900px) {
	.ck-header__nav-row {
		display: none;
	}
}

.ck-header__search {
	flex: 1 1 auto;
	max-width: 360px;
	margin-left: auto;
}

.ck-header__search form {
	display: block;
}

/* Welcart標準の検索フォーム(get_head_search_form())が実際に生成するのは
   <form><div class="s-box"><input><button></button></div></form> という構造で、
   input/buttonの直接の親は<form>ではなく.s-box。以前はflexを<form>にかけていたため
   実際には効いておらず、ボタンの高さがinputと揃っていなかった(アイコンをFont Awesome 7の
   SVGに切り替えたことで、たまたま近かった高さのズレが目立つようになった)。 */
.ck-header__search .s-box {
	display: flex;
	align-items: stretch;
}

.ck-header__search input[type="text"],
.ck-header__search input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--ck-color-border-soft);
	border-radius: var(--ck-radius-pill) 0 0 var(--ck-radius-pill);
	padding: 9px 16px;
	font-size: 0.85rem;
	background: var(--ck-color-bg-soft);
}

.ck-header__search button,
.ck-header__search input[type="submit"] {
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 0 var(--ck-radius-pill) var(--ck-radius-pill) 0;
	background: var(--ck-color-primary);
	color: var(--ck-color-white);
	padding: 0 18px;
	cursor: pointer;
}

.ck-header__utility {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: 0 0 auto;
}

.ck-header__icon-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ck-color-text);
	font-size: 0.82rem;
}

.ck-header__icon-link:hover {
	color: var(--ck-color-primary);
}

.ck-header__badge {
	position: absolute;
	top: -8px;
	right: -10px;
	background: var(--ck-color-accent-red);
	color: var(--ck-color-white);
	font-size: 0.65rem;
	font-weight: 700;
	min-width: 16px;
	height: 16px;
	line-height: 16px;
	border-radius: 50%;
	text-align: center;
	padding: 0 3px;
}

.ck-header__search-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: var(--ck-color-bg-soft);
	color: var(--ck-color-text);
	font-size: 1rem;
	cursor: pointer;
	flex: 0 0 auto;
}

.ck-header__menu-toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	flex: 0 0 auto;
}

.ck-header__menu-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--ck-color-black);
}

.ck-mobile-nav {
	display: none;
	border-top: 1px solid var(--ck-color-border-soft);
	padding: 12px var(--ck-container-padding-sp);
}

.ck-mobile-nav.is-open {
	display: block;
}

.ck-mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ck-mobile-nav__list li {
	border-bottom: 1px solid var(--ck-color-border-soft);
}

.ck-mobile-nav__list a {
	display: block;
	padding: 12px 4px;
	color: var(--ck-color-text);
}

@media (max-width: 900px) {
	/* 検索ボックスを常時表示せず、虫眼鏡アイコンをタップしたときだけ展開する。
	   常時表示だとヘッダーの高さが増え、sticky追従時に本文へ大きくかぶさって見えるため。 */
	.ck-header__search {
		display: none;
		order: 5;
		flex: 1 1 100%;
		max-width: none;
		margin-left: 0;
		margin-top: 10px;
	}
	.ck-header__search.is-open {
		display: block;
	}
	.ck-header__search-toggle {
		display: flex;
	}
	.ck-header__menu-toggle {
		display: flex;
	}
	.ck-header__inner {
		flex-wrap: wrap;
	}
}

@media (max-width: 600px) {
	.ck-header__inner {
		gap: 10px;
		padding: 12px var(--ck-container-padding-sp);
	}
	.ck-header__logo {
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
	}
	.ck-header__site-title {
		font-size: 1.05rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: block;
	}
	.ck-header__search-toggle {
		order: 2;
	}
	.ck-header__utility {
		order: 3;
		gap: 12px;
	}
	.ck-header__icon-link span:not(.ck-header__badge) {
		display: none;
	}
	.ck-header__menu-toggle {
		order: 4;
	}
}

/* フッター */
.ck-footer {
	background: var(--ck-color-white);
	border-top: 1px solid var(--ck-color-border-soft);
	font-family: var(--ck-font-body);
}

/* フッター冒頭の「ブランドモーメント」。ju-chool.comの、リンク一覧より前に
   ロゴを大きく中央に置く構成を参考に、単なる著作権表示の添え物ではなく
   フッター自体の起点として扱う。 */
.ck-footer__brand {
	text-align: center;
	padding: 48px var(--ck-container-padding) 32px;
	border-bottom: 1px solid var(--ck-color-border-soft);
}

.ck-footer__brand-logo {
	display: inline-flex;
	color: var(--ck-color-black);
	font-weight: 900;
}

/* ヘッダーと同様、カスタムロゴ画像は実サイズのまま出力されるため上限を指定する。
   フッターではブランドの主役として、ヘッダーより一回り大きく見せる。 */
.ck-footer__brand-logo img {
	display: inline-block;
	max-height: 64px;
	max-width: 100%;
	width: auto;
}

.ck-footer__nav {
	max-width: var(--ck-container-max-width);
	margin: 0 auto;
	padding: 48px var(--ck-container-padding) 40px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

/* 列見出しは下線付きテキストではなく、参考サイトの黒ピル+矢印アイコンの
   バッジ表現に寄せる(コンテンツ一覧/ご利用案内/会社情報、それぞれへの
   導線であることを強調する)。 */
.ck-footer__col h3 {
	margin: 0 0 18px;
}

.ck-footer__col-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--ck-color-black);
	color: var(--ck-color-white);
	font-size: 0.8rem;
	font-weight: 900;
	letter-spacing: 0.02em;
	padding: 8px 16px;
	border-radius: var(--ck-radius-pill);
}

.ck-footer__col-badge i {
	font-size: 0.7rem;
}

.ck-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ck-footer__col li {
	margin-bottom: 10px;
}

.ck-footer__col a {
	color: var(--ck-color-text);
	font-size: 0.85rem;
}

.ck-footer__col a:hover {
	color: var(--ck-color-primary);
}

.ck-footer__bottom {
	background: var(--ck-color-black);
	padding: 24px var(--ck-container-padding);
	text-align: center;
	color: var(--ck-color-white);
}

.ck-footer__copyright {
	font-size: 0.75rem;
	opacity: 0.7;
	margin: 0;
}

@media (max-width: 740px) {
	.ck-footer__nav {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 40px var(--ck-container-padding-sp) 32px;
	}
}