@charset "UTF-8";
/* ==========================================================================
   ワイン会navi ヘッダー
   親テーマ AVANT の style.css より後に読み込まれる前提（functions.php 優先度 100）
   ========================================================================== */

/* デザイントークンは tokens.css に集約 */


/* --------------------------------------------------------------------------
   コンテンツの上余白
   親テーマは .l-main { padding-top: 171px } とヘッダー高を直書きしている。
   ヘッダーを作り替えたので必ず合わせること。
   -------------------------------------------------------------------------- */
.l-main { padding-top: var(--wk-header-h); }


/* --------------------------------------------------------------------------
   土台
   -------------------------------------------------------------------------- */
.wk-header { background: #fff; }

.wk-header__accent { height: 3px; background: var(--wk-wine); }

.wk-header__main {
	display: flex;
	align-items: center;
	gap: 24px;
	height: 86px;
}


/* --------------------------------------------------------------------------
   ロゴ / タグライン
   -------------------------------------------------------------------------- */
.wk-header__logo { flex: 0 0 auto; margin: 0; }

.wk-header__logo a { display: flex; align-items: center; line-height: 1; }

.wk-header__logo img {
	display: block;
	width: auto;
	/*
	 * height を確定させる理由:
	 * 記事側のカスタム CSS にスコープ外の `img { max-width:100%; height:auto }` が
	 * 混入しているページがあり、その場合 width:auto + max-width:100% が
	 * 親（flex:0 0 auto）の内容依存サイズと循環して 0×0 に潰れる。
	 * 高さを与えるとアスペクト比から幅が決まり、循環が解ける。
	 * max-height が下にあるので、折りたたみ時の上書きは従来どおり効く。
	 */
	height: 52px;
	max-height: 52px;
	transition: max-height .3s ease;
}

.wk-header__logo .c-font-type--logo {
	color: var(--wk-ink);
	font-size: 24px;
	letter-spacing: .02em;
}

.wk-header__tagline {
	flex: 0 1 auto;
	margin: 0;
	padding-left: 20px;
	border-left: 1px solid var(--wk-line);
	color: var(--wk-muted);
	font-size: 11.5px;
	line-height: 1.6;
	letter-spacing: .04em;
}

@media only screen and (max-width: 1439px) {
	.wk-header__tagline { display: none; }
}


/* --------------------------------------------------------------------------
   検索
   -------------------------------------------------------------------------- */
.wk-search {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 330px;
	margin-left: auto;
}

.wk-search__label {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.wk-search__input {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	padding: 0 44px 0 20px;
	border: 1px solid var(--wk-line);
	border-radius: 999px;
	outline: none;
	background: #fff;
	color: var(--wk-ink);
	font-size: 14px;
	transition: border-color .25s ease;
}

.wk-search__input::placeholder { color: #A6A29C; }

.wk-search__input:focus {
	border-color: var(--wk-wine);
	box-shadow: 0 0 0 3px rgba(123, 30, 58, .08);
}

.wk-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.wk-search__submit {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	outline: none;
	background: transparent;
	color: var(--wk-muted);
	font-family: "design_plus";
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: color .2s ease, background .2s ease;
}

.wk-search__submit::before { content: "\e915"; }

.wk-search__submit:hover { color: var(--wk-wine); background: var(--wk-cream); }


/* --------------------------------------------------------------------------
   CTA「今月のワイン会」
   -------------------------------------------------------------------------- */
.wk-cta {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	height: 44px;
	padding: 0 24px;
	border-radius: 999px;
	background: var(--wk-wine);
	color: #fff;
	font-size: 13.5px;
	letter-spacing: .06em;
	text-decoration: none;
	white-space: nowrap;
	transition: background .25s ease;
}

.wk-cta:hover,
.wk-cta:focus { background: var(--wk-wine-dark); color: #fff; }


/* --------------------------------------------------------------------------
   ナビゲーション行
   -------------------------------------------------------------------------- */
.wk-header__nav-row { border-top: 1px solid var(--wk-line); }

.wk-header__nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 52px;
}

.wk-header__count {
	flex: 0 0 auto;
	margin: 0;
	color: var(--wk-muted);
	font-size: 12px;
	letter-spacing: .05em;
}

.wk-header__count strong {
	color: var(--wk-wine);
	font-size: 14px;
	font-weight: 500;
}

/* 親テーマのボックス型ナビを打ち消してテキスト＋下線に */
.wk-header .p-global-nav { height: auto; font-size: 14px; }

.wk-header .p-global-nav > ul {
	display: flex;
	height: auto;
	margin: 0;
}

.wk-header .p-global-nav > ul > li {
	width: auto;
	margin: 0 34px 0 0;
	border: 0;
}

.wk-header .p-global-nav > ul > li:last-child { margin-right: 0; }

.wk-header .p-global-nav > ul > li > a {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	width: auto;
	height: 52px;
	padding: 0;
	color: var(--wk-muted);
	letter-spacing: .09em;
	white-space: nowrap;
	transition: color .25s ease;
}

/* 親テーマの 120px × 5px のバーを 100% × 2px の下線に作り替える */
.wk-header .p-global-nav > ul > li > a::before {
	top: auto;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--wk-wine);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s ease;
}

.wk-header .p-global-nav > ul > li:hover > a,
.wk-header .p-global-nav > ul > li.current-menu-item > a,
.wk-header .p-global-nav > ul > li.current-menu-ancestor > a,
.wk-header .p-global-nav > ul > li.current-menu-parent > a { color: var(--wk-ink); }

.wk-header .p-global-nav > ul > li:hover > a::before,
.wk-header .p-global-nav > ul > li.current-menu-item > a::before,
.wk-header .p-global-nav > ul > li.current-menu-ancestor > a::before,
.wk-header .p-global-nav > ul > li.current-menu-parent > a::before { transform: scaleX(1); }

/* メニューに設定済みのアイコン画像を小さくインライン表示 */
.wk-header .p-global-nav__item-icon {
	display: inline-flex;
	align-items: center;
	margin: 0;
	opacity: .7;
	transition: opacity .25s ease;
}

.wk-header .p-global-nav__item-icon img {
	display: block;
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.wk-header .p-global-nav > ul > li:hover .p-global-nav__item-icon { opacity: 1; }

/* デスクトップではドロワー専用要素を隠す */
.wk-nav__cta-item { display: none; }

/* サブメニュー */
.wk-header .p-global-nav .sub-menu {
	border: 1px solid var(--wk-line);
	background: #fff;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .07);
}

.wk-header .p-global-nav .sub-menu a {
	width: 220px;
	padding: 15px 20px;
	color: var(--wk-ink);
	transition: background .2s ease, color .2s ease;
}

.wk-header .p-global-nav .sub-menu a:hover {
	background: var(--wk-cream);
	color: var(--wk-wine);
}


/* --------------------------------------------------------------------------
   スクロール追従時は少し縮める
   -------------------------------------------------------------------------- */
.wk-header.l-header--fixed.is-active {
	border-bottom: 1px solid var(--wk-line);
	box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
}

.wk-header.l-header--fixed.is-active .wk-header__main { height: 66px; }

.wk-header.l-header--fixed.is-active .wk-header__logo img { max-height: 40px; }

.wk-header.l-header--fixed.is-active .wk-header__tagline { display: none; }


/* ==========================================================================
   モバイル / タブレット（親テーマのブレークポイントに合わせて 1199px）
   ========================================================================== */
@media only screen and (max-width: 1199px) {

	.l-main { padding-top: 0; }

	/* ドロワーの絶対配置をヘッダー基準にする */
	.wk-header {
		position: relative;
		height: 60px;
		line-height: normal;
	}

	.wk-header__accent { display: none; }

	.wk-header__main {
		box-sizing: border-box;
		width: 100%;
		max-width: none;
		height: 60px;
		gap: 0;
		/* 右 60px はハンバーガーボタンの領域を確保するため */
		padding: 0 60px 0 20px;
	}

	.wk-header__logo {
		/* min-width:0 = 画面が狭いときにロゴ側を縮めて CTA を押し出さないため */
		min-width: 0;
		width: auto;
		margin-right: auto;
		padding: 0;
	}

	.wk-header__logo img { max-width: 100%; height: 32px; max-height: 32px; }

	.wk-header__logo .c-font-type--logo { font-size: 18px; }

	.wk-header__tagline,
	.wk-search,
	.wk-header__count { display: none; }

	/* CTA はヘッダーバーに小さく常設する（ドロワーを開かなくても届くように） */
	.wk-cta {
		display: inline-flex;
		height: 34px;
		padding: 0 14px;
		font-size: 11.5px;
		letter-spacing: .02em;
	}

	/* CTA 同士が密着するのを防ぐ（ロゴとの間も押し出しではなく間隔を確保） */
	.wk-header__main .wk-cta { margin-left: 10px; }
	.wk-header__main .wk-cta:first-of-type { margin-left: 0; }
	/* 画面が狭いときはロゴを縮めてでもボタン間隔を維持する */
	@media only screen and (max-width:400px) {
		.wk-header__main .wk-cta { margin-left: 8px; padding: 0 12px; }
		.wk-header__logo img { max-width: 130px; }
	}

	.wk-header__nav-row { height: 0; border-top: 0; }

	/*
	 * .l-inner には position:relative が付いている。
	 * そのままだとドロワー (#js-global-nav, top:60px) がこの要素を基準に配置され
	 * 60px 下にずれるため、static に戻して .wk-header を基準にする。
	 */
	.wk-header__nav-inner {
		position: static;
		display: block;
		width: 100%;
		max-width: none;
		height: auto;
		padding: 0;
	}

	.c-menu-btn {
		top: 0;
		right: 0;
		width: 60px;
		height: 60px;
		line-height: 60px;
	}

	/* ドロワー */
	.wk-header .p-global-nav {
		top: 60px;
		border-top: 1px solid var(--wk-line);
		background: #fff;
		box-shadow: 0 10px 24px rgba(0, 0, 0, .07);
	}

	/*
	 * 【重要】親テーマは inc/head.php から <head> に以下のインラインCSSを出力する:
	 *
	 *   @media (max-width:1199px){
	 *     .p-global-nav { background: rgba(<gnav_bg_sp>, <opacity>) }
	 *     .p-global-nav > ul > li > a, .p-global-nav a, .p-global-nav a:hover,
	 *     .p-global-nav .sub-menu a, .p-global-nav .sub-menu a:hover {
	 *       color: <gnav_color_sp> !important;
	 *     }
	 *   }
	 *
	 * gnav_color_sp の既定値は #ffffff（背景 #000000 の黒ドロワー前提）。
	 * ドロワーを白背景にしたため、この !important を打ち消さないと
	 * 白文字が白地に乗ってメニューが読めなくなる。
	 * 詳細度で上回る形で明示的に上書きしている。
	 */
	.wk-header .p-global-nav > ul > li > a,
	.wk-header .p-global-nav a,
	.wk-header .p-global-nav a:hover,
	.wk-header .p-global-nav .sub-menu a,
	.wk-header .p-global-nav .sub-menu a:hover { color: var(--wk-ink) !important; }

	.wk-header .p-global-nav .sub-menu a:hover { color: var(--wk-wine) !important; }

	/* CTA だけは白文字を維持する（ボルドー地のため） */
	.wk-header .wk-nav__cta-item a { color: #fff !important; }

	/* ドロワー内の検索フォーム */
	.wk-header .p-global-nav__form-input {
		border-radius: 999px;
		background: #F5F3EF;
		color: var(--wk-ink);
	}

	.wk-header .p-global-nav__form-submit { color: var(--wk-muted); }

	.admin-bar .wk-header .p-global-nav { top: 60px; }

	.wk-header .p-global-nav > ul { display: block; }

	.wk-header .p-global-nav > ul > li {
		width: 100%;
		margin: 0;
		border-bottom: 1px solid var(--wk-line);
	}

	.wk-header .p-global-nav > ul > li > a {
		height: auto;
		padding: 16px 20px;
		color: var(--wk-ink);
	}

	.wk-header .p-global-nav > ul > li > a::before { display: none; }

	.wk-header .p-global-nav__item-icon { opacity: 1; }

	.wk-header .p-global-nav__form-wrapper {
		display: block;
		padding: 16px 20px;
		border-bottom: 1px solid var(--wk-line);
	}

	.wk-header .p-global-nav .sub-menu a { width: 100%; }

	/* ヘッダーバーに CTA を出しているので、ドロワー内は既定で非表示 */
	.wk-nav__cta-item {
		display: none;
		padding: 16px 20px 20px;
		border-bottom: 0;
	}

	.wk-nav__cta-item a {
		display: block;
		padding: 15px;
		border-radius: 999px;
		background: var(--wk-wine);
		color: #fff;
		font-size: 14px;
		letter-spacing: .06em;
		text-align: center;
		text-decoration: none;
	}
}


/* ==========================================================================
   極小画面（iPhone SE 第1世代など 359px 以下）
   ヘッダーバーに CTA を置くと横幅が足りないため、ドロワー内に戻す
   ========================================================================== */
@media only screen and (max-width: 359px) {

	.wk-cta { display: none; }

	.wk-nav__cta-item { display: block; }
}