/* =========================================================
   ヘッダーメニューの3階層目・ページ内リンクの着地位置（全ページ共通）
   main.css（ビルド生成物）は触らず、ここで足す。
   ========================================================= */

/* ---------- PC：2階層目の右に開く小メニュー ---------- */
@media (min-width: 1280px) {
	.l-gnav__sub > li.has-child { position: relative; }
	.l-gnav__sub > li.has-child > a { position: relative; padding-right: calc(44 * var(--u)); }
	.l-gnav__sub > li.has-child > a::after {
		content: ""; position: absolute; right: calc(22 * var(--u)); top: 50%;
		width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
		translate: 0 -50%; rotate: 45deg;
	}
	.l-gnav__sub > li.has-child:hover > a,
	.l-gnav__sub > li.has-child:focus-within > a { background: #f6f1eb; color: var(--c-brown); }
	.l-gnav__sub3 {
		position: absolute; left: 100%; top: calc(-12 * var(--u)); z-index: 6;
		min-width: calc(220 * var(--u)); padding: calc(12 * var(--u)) 0;
		background: #fff; box-shadow: 0 8px 24px rgba(53, 45, 37, .12); border-radius: calc(4 * var(--u));
		opacity: 0; visibility: hidden; translate: calc(-8 * var(--u)) 0; transition: opacity .2s, translate .2s, visibility .2s;
	}
	.l-gnav__sub > li.has-child:hover > .l-gnav__sub3,
	.l-gnav__sub > li.has-child:focus-within > .l-gnav__sub3 { opacity: 1; visibility: visible; translate: 0 0; }
	/* 右寄りのメニューは、画面からはみ出さないよう左に開く */
	.l-gnav__item:nth-last-child(-n+4) .l-gnav__sub3 { left: auto; right: 100%; translate: calc(8 * var(--u)) 0; }
	.l-gnav__item:nth-last-child(-n+4) .l-gnav__sub > li.has-child:hover > .l-gnav__sub3,
	.l-gnav__item:nth-last-child(-n+4) .l-gnav__sub > li.has-child:focus-within > .l-gnav__sub3 { translate: 0 0; }
	.l-gnav__item:nth-last-child(-n+4) .l-gnav__sub > li.has-child > a::after { right: auto; left: calc(14 * var(--u)); rotate: -135deg; translate: 0 -50%; }
	.l-gnav__item:nth-last-child(-n+4) .l-gnav__sub > li.has-child > a { padding-right: calc(24 * var(--u)); padding-left: calc(36 * var(--u)); }
}

/* ---------- スマホ・タブレット：ドロワーでは2階層目の下に字下げ ---------- */
@media (max-width: 1279px) {
	.l-drawer__acc-sub { padding-left: calc(20 * var(--s)); }
	.l-drawer__acc-sub a { padding-top: calc(9 * var(--s)); padding-bottom: calc(9 * var(--s)); font-size: max(calc(13 * var(--s)), 10px); }
	.l-drawer__acc-sub a::before { width: calc(8 * var(--s)); height: 0; border-right: 0; rotate: none; margin-bottom: calc(4 * var(--s)); }
}

/* ---------- ページ内リンク（目次など）の着地位置 ----------
   固定ヘッダーの高さは main.css の scroll-padding-top で空けている。
   ここでは見出しの上に少し余白を足し、ログイン中の管理バー（PC 32px／スマホ 46px）でヘッダーが下がる分も空ける。 */
.l-main [id] { scroll-margin-top: 24px; }
.admin-bar .l-main [id] { scroll-margin-top: calc(24px + 32px); }
@media (max-width: 1023px) {
	.l-main [id] { scroll-margin-top: 16px; }
	.admin-bar .l-main [id] { scroll-margin-top: calc(16px + 46px); }
}

/* ---------- TOP：ブログ欄を非表示にしたとき（inc/top-blog.php）は Instagram の案内を上に詰める ---------- */
@media (min-width: 1024px) { .p-blog.is-no-blog .p-blog__insta { margin-top: 0; } }
@media (max-width: 1023px) { .p-blog.is-no-blog .p-blog__insta { margin-top: 0; } }