/**
 * AOSE WordPress
 * aose-swell.css
 *
 * AOSE × SWELL 実接続・干渉調整
 * 対象：aose.jp / SWELL CHILD
 *
 * 確認環境：
 * SWELL 2.19.0
 *
 * 役割：
 * - AOSE Token と SWELL基本変数の接続
 * - Header / Navigation 接続
 * - Mobile Menu 接続
 * - 本文外枠との境界調整
 * - SWELL標準H2 / H3装飾との干渉解除
 * - 固定Headerとアンカー位置調整
 * - Footer接続
 * - WordPress Blockの安全調整
 *
 * 原則：
 * - SWELL標準機能を優先
 * - H1重複をCSS非表示だけで解決しない
 * - パンくずを二重出力しない
 * - 深いSelectorを増やさない
 * - !importantを常用しない
 *
 * Based on:
 * 青清 AOSE WordPress再構築 全体設計仕様書 v1.0
 */


/* =========================================================
   1. AOSE TOKEN → SWELL
   ========================================================= */

/*
 * AOSEとSWELLの基本色・幅を接続する。
 *
 * SWELLの機能そのものを変更するのではなく、
 * AOSEブランドの値を共有する。
 */
.aose-site {

	/* Brand */
	--color_main: var(--aose-color-brown);
	--color_text: var(--aose-color-ink);
	--color_link: var(--aose-color-brown);
	--color_htag: var(--aose-color-brown);

	/* Background */
	--color_bg: var(--aose-color-white);

	/* Header */
	--color_header_bg: var(--aose-color-white);
	--color_header_text: var(--aose-color-ink);

	/* Footer */
	--color_footer_bg: var(--aose-color-ink);
	--color_footer_text: var(--aose-color-koji-white);

	/* Width */
	--container_size: var(--aose-width-wide);
	--article_size: var(--aose-width-content);
}


/* =========================================================
   2. HEADER
   ========================================================= */

/*
 * 実DOM：
 *
 * .l-header
 * .l-header__inner
 * .l-header__logo
 * .c-headLogo
 * .c-gnav
 *
 * Headerの配置・透明処理・Sticky機能は
 * SWELL標準を使用する。
 */
.aose-site .l-header,
.aose-site .l-fixHeader {
	font-family: var(--aose-font-ui);
}


/*
 * SP Headerの最低高さ。
 *
 * SWELL側の内容量によって
 * 必要な場合は自然に伸びる。
 */
.aose-site .l-header__inner {
	min-height: var(--aose-header-height-sp, 64px);
}


/*
 * 固定Header。
 */
.aose-site .l-fixHeader__inner {
	min-height: var(--aose-header-height-pc-compact, 60px);
}


/* =========================================================
   3. HEADER LOGO / BRAND
   ========================================================= */

.aose-site
.l-header
.c-headLogo__link,
.aose-site
.l-fixHeader
.c-headLogo__link {
	font-family: var(--aose-font-heading);
	font-weight: var(--aose-font-weight-medium);

	color: inherit;
	text-decoration: none;
}


/* =========================================================
   4. GLOBAL NAVIGATION
   ========================================================= */

/*
 * 実DOM：
 *
 * .c-gnav
 * .c-gnav > li > a
 */
.aose-site
.c-gnav > li > a {
	min-height: 44px;

	font-family: var(--aose-font-ui);
	font-size: 0.9375rem;
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.4;
}


/*
 * 現在ページ。
 *
 * SWELL標準表示は維持する。
 * 色だけに依存した独自Current表現は追加しない。
 */


/* =========================================================
   5. ONLINE STORE CTA
   ========================================================= */

/*
 * WordPressメニュー項目へ
 *
 * aose-nav-store
 *
 * を付けることで、
 * aose-header-footer.css 側のCTAを利用する。
 *
 * SWELL DOM上では
 *
 * li.aose-nav-store > a
 *
 * となる想定。
 */
.aose-site
.c-gnav
.aose-nav-store > a {
	min-height: 44px;
}


/* =========================================================
   6. MOBILE MENU
   ========================================================= */

/*
 * 実DOM：
 *
 * .p-spMenu
 * .c-spnav
 * .c-listMenu
 */
.aose-site .p-spMenu {
	font-family: var(--aose-font-ui);
}


/*
 * Mobile Menuでも
 * タップ領域を十分確保する。
 */
.aose-site
.p-spMenu
.c-listMenu > li > a {
	min-height: 44px;
}


/* =========================================================
   7. HEADER FOCUS
   ========================================================= */

.aose-site
.l-header
:where(
	a[href],
	button
):focus-visible,
.aose-site
.l-fixHeader
:where(
	a[href],
	button
):focus-visible,
.aose-site
.p-spMenu
:where(
	a[href],
	button
):focus-visible {
	outline:
		2px solid
		var(--aose-color-brown);

	outline-offset: 3px;
}


/* =========================================================
   8. PC HEADER
   ========================================================= */

@media (min-width: 1024px) {

	.aose-site
	.l-header__inner {
		min-height:
			var(--aose-header-height-pc, 80px);
	}

}


/* =========================================================
   9. MAIN CONTENT BOUNDARY
   ========================================================= */

/*
 * 実DOM：
 *
 * #content.l-content.l-container
 *
 * #main_content.l-mainContent.l-article
 *
 * .l-mainContent__inner
 *
 * .post_content
 */
.aose-site
.l-content,
.aose-site
.l-mainContent,
.aose-site
.l-mainContent__inner,
.aose-site
.post_content {
	min-width: 0;
}


/*
 * AOSE本文Root。
 *
 * WordPress本文内では
 * div またはGroup Blockに
 *
 * .aose-page
 *
 * を付与する。
 */
.aose-site
.post_content
.aose-page {
	min-width: 0;
}


/* =========================================================
   10. AOSE WIDTH SYSTEM
   ========================================================= */

/*
 * AOSE側では
 *
 * Wide    1200px
 * Content  800px
 * Narrow   680px
 *
 * をaose-layout.cssが正本として管理する。
 *
 * SWELLの既存Content幅を
 * 無条件に解除しない。
 *
 * 必要な全幅Sectionは、
 * 実際の代表ページ制作時に確認する。
 */


/* =========================================================
   11. SWELL H2 DECORATION RESET
   ========================================================= */

/*
 * 現在のSWELL設定では
 * 通常H2へ左Brown Borderが自動付与される。
 *
 * AOSE本文内では
 * AOSE Typography / Componentsを正本とするため、
 * この標準装飾だけ解除する。
 */
.aose-site
.post_content
.aose-page
h2:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title) {
	border-inline-start: 0;
	padding-inline-start: 0;
}


/*
 * SWELL H2疑似要素。
 */
.aose-site
.post_content
.aose-page
h2:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)::before {
	content: none;
	display: none;
}


/* =========================================================
   12. SWELL H3 DECORATION RESET
   ========================================================= */

/*
 * 現在のSWELL設定では
 * 通常H3へ下線装飾が自動付与される。
 *
 * AOSE本文内では解除する。
 */
.aose-site
.post_content
.aose-page
h3:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title) {
	padding-inline: 0;
	padding-block-end: 0;
}


/*
 * SWELL H3疑似要素。
 */
.aose-site
.post_content
.aose-page
h3:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)::before {
	content: none;
	display: none;
}


/* =========================================================
   13. WORDPRESS BLOCK SAFETY
   ========================================================= */

.aose-site
.aose-page
:where(
	.wp-block-group,
	.wp-block-columns,
	.wp-block-column,
	.wp-block-image,
	.wp-block-cover
) {
	min-width: 0;
}


/*
 * Image Block。
 */
.aose-site
.aose-page
.wp-block-image img {
	max-width: 100%;
	height: auto;
}


/* =========================================================
   14. FIXED HEADER / ANCHOR OFFSET
   ========================================================= */

/*
 * ページ内Navigationから移動したとき、
 * 見出しが固定Headerの下へ隠れないようにする。
 *
 * SP：
 * 64px + 16px
 */
.aose-site
.aose-page
[id] {
	scroll-margin-top:
		calc(
			var(--aose-header-height-sp, 64px)
			+
			var(--aose-space-2)
		);
}


/*
 * PC：
 * 80px + 16px
 */
@media (min-width: 1024px) {

	.aose-site
	.aose-page
	[id] {
		scroll-margin-top:
			calc(
				var(--aose-header-height-pc, 80px)
				+
				var(--aose-space-2)
			);
	}

}


/* =========================================================
   15. H1 POLICY
   ========================================================= */

/*
 * H1についてはCSSで消さない。
 *
 * AOSE正式ルール：
 *
 * 親・固定子ページ
 * → 独自HERO内H1を正式H1
 *
 * 通常投稿
 * → WordPress投稿タイトルを正本
 *
 * SWELL標準H1と独自H1が重複する場合は、
 *
 * SWELL設定
 * ↓
 * 適切なHook
 * ↓
 * PHP出力制御
 *
 * の順で一つにする。
 *
 * display:noneだけで
 * H1重複解決とは扱わない。
 */


/* =========================================================
   16. BREADCRUMB POLICY
   ========================================================= */

/*
 * パンくずはSWELL標準を一つだけ使用する。
 *
 * 独自Breadcrumbを追加しない。
 *
 * TOPでは通常不要。
 *
 * Parent / Childページで
 * 実DOMが確認できた段階で
 * 必要な外観調整だけ追加する。
 */


/* =========================================================
   17. FULL WIDE BLOCK
   ========================================================= */

/*
 * 現在のSWELLでは
 *
 * .swell-block-fullWide
 * .swell-block-fullWide__inner
 *
 * が使用されている。
 *
 * AOSEでは既存Full Wide機能を利用可能。
 *
 * 全Pageへ
 *
 * margin-left: calc(50% - 50vw)
 *
 * 等を強制しない。
 */
.aose-site
.aose-page
.swell-block-fullWide__inner {
	min-width: 0;
}


/* =========================================================
   18. TABLE
   ========================================================= */

/*
 * 表が横へ長い場合は
 *
 * .aose-table-scroll
 *
 * で包む。
 *
 * Page全体へ
 * overflow-x:hidden
 * は設定しない。
 */
.aose-site
.aose-page
.aose-table-scroll {
	width: 100%;
	overflow-x: auto;

	-webkit-overflow-scrolling: touch;
}


/* =========================================================
   19. FOOTER
   ========================================================= */

/*
 * 実DOM：
 *
 * .l-footer
 * .l-footer__inner
 * .l-footer__widgetArea
 * .w-footer
 */
.aose-site
.l-footer {
	font-family: var(--aose-font-body);

	background-color:
		var(--aose-color-ink);

	color:
		var(--aose-color-koji-white);
}


/*
 * Widget area。
 */
.aose-site
.l-footer__widgetArea {
	background-color:
		var(--aose-color-ink);

	color:
		var(--aose-color-koji-white);
}


/* =========================================================
   20. FOOTER HEADINGS
   ========================================================= */

.aose-site
.l-footer
.c-widget__title.-footer {
	font-family:
		var(--aose-font-heading);

	font-weight:
		var(--aose-font-weight-medium);

	color:
		var(--aose-color-koji-white);
}


/* =========================================================
   21. FOOTER LINKS
   ========================================================= */

.aose-site
.l-footer
a {
	color: inherit;
}


/*
 * Footer Navigation等。
 */
.aose-site
.l-footer
.c-listMenu a {
	color:
		rgba(248, 246, 240, 0.82);
}


/* =========================================================
   22. FOOTER FOCUS
   ========================================================= */

.aose-site
.l-footer
:where(
	a[href],
	button
):focus-visible {
	outline:
		2px solid
		var(--aose-color-white);

	outline-offset: 3px;
}


/* =========================================================
   23. FAQ
   ========================================================= */

/*
 * FAQの開閉処理は
 * SWELL標準機能を使用する。
 *
 * AOSEでは
 * 必要な外観調整だけを追加する。
 *
 * 独自FAQ JavaScriptは追加しない。
 */


/* =========================================================
   24. SEARCH
   ========================================================= */

/*
 * SWELL Search：
 *
 * .c-searchForm
 * .p-searchModal
 *
 * 動作はSWELL標準を利用する。
 *
 * AOSE独自Search JSは作らない。
 */


/* =========================================================
   25. FIX HEADER
   ========================================================= */

/*
 * 実環境では
 *
 * #fix_header
 * .l-fixHeader
 *
 * が存在する。
 *
 * Header縮小・表示制御は
 * SWELL標準JSを使用する。
 *
 * AOSE独自スクロールJSを重ねない。
 */


/* =========================================================
   26. REDUCED MOTION
   ========================================================= */

/*
 * SWELLそのものの全Animationを
 * AOSEから無条件停止しない。
 *
 * AOSE独自Motionについては
 * aose-motion.cssを正本とする。
 */


/* =========================================================
   27. IMPORTANT POLICY
   ========================================================= */

/*
 * このファイルでは
 * !importantを原則使用しない。
 *
 * 例外が必要になった場合は、
 *
 * 対象
 * 理由
 * SWELL Version
 * 影響範囲
 *
 * をコメントとして残す。
 */


/* =========================================================
   28. DO NOT RESET
   ========================================================= */

/*
 * 以下のような
 * Global Resetをここへ書かない。
 *
 * body {}
 *
 * main {}
 *
 * h1 {}
 *
 * h2 {}
 *
 * h3 {}
 *
 * * {}
 *
 * .post_content * {}
 *
 * 必ずAOSE範囲または
 * 確認済みSWELL範囲へ限定する。
 */


/* =========================================================
   29. VERIFIED SWELL DOM
   ========================================================= */

/*
 * SWELL 2.19.0
 *
 * 確認済み：
 *
 * Header
 * .l-header
 * .l-header__inner
 * .l-header__logo
 * .c-headLogo
 * .c-gnav
 *
 * Fixed Header
 * .l-fixHeader
 * .l-fixHeader__inner
 * .l-fixHeader__logo
 * .l-fixHeader__gnav
 *
 * Mobile
 * .p-spMenu
 * .c-spnav
 * .c-listMenu
 *
 * Main
 * #content.l-content.l-container
 * #main_content.l-mainContent.l-article
 * .l-mainContent__inner
 * .post_content
 *
 * Footer
 * .l-footer
 * .l-footer__inner
 * .l-footer__widgetArea
 * .w-footer
 *
 * Search
 * .p-searchModal
 * .c-searchForm
 */


/* =========================================================
   30. IMPLEMENTATION RULES
   ========================================================= */

/*
 * AOSE × SWELLでは以下を原則とする。
 *
 * 1.
 * SWELL設定でできることは
 * SWELL設定を優先する。
 *
 * 2.
 * WordPress標準Blockでできることは
 * 標準Blockを優先する。
 *
 * 3.
 * SWELL Blockが適切なら利用する。
 *
 * 4.
 * 一括更新するContentは
 * Blog Partsを利用する。
 *
 * 5.
 * 共通CSSで解決できることに
 * PHPやTemplate変更を増やさない。
 *
 * 6.
 * Header / Mobile Menu / Search /
 * Fixed HeaderはSWELL標準機能を利用する。
 *
 * 7.
 * H1はPageにつき主要1つ。
 *
 * 8.
 * Breadcrumbも1つ。
 *
 * 9.
 * AOSE本文内のH2 / H3は
 * AOSE Typographyを正本とする。
 *
 * 10.
 * SWELLの内部DOMは
 * 実際に確認したSelectorだけ使用する。
 *
 * 11.
 * !importantを常用しない。
 *
 * 12.
 * AOSE未改修Pageを
 * 不必要に壊さない。
 */