/*!
Theme Name: bananaleaf
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: bananaleaf
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

bananaleaf is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

/* body_class() も固定ページに .page を付けるため、article に限定しないと
   <body> 自身に margin-bottom が付き、フッターの下に余白が残る。 */
article.post,
article.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# bananaleaf Layout
--------------------------------------------------------------*/

.site-container {
	max-width: var(--bl-container, 1200px);
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

/* Site Header */
.site-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 9998;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	background-color: var(--bl-header-bg, #ffffff);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

body.no-sticky-header .site-header {
	position: static;
}

/* Header shadow off option from customizer */
body.header-shadow-off .site-header,
body.header-shadow-off.header-scroll-solid.header-scrolled .site-header {
	box-shadow: none !important;
}

/* Transparent header: background is completely clear when not scrolled (top).
   Uses body-level class + !important so it wins over PHP-side inline style. */
body.header-transparent:not(.header-scrolled) .site-header {
	background-color: transparent !important;
	background: transparent !important;
	box-shadow: none !important;
	border-bottom: 0 !important;
}

/* Scroll-to-solid behavior (header_scroll_solid = true):
   once scrolled, restore the normal header background + (optionally) shadow. */
body.header-transparent.header-scroll-solid.header-scrolled .site-header {
	background-color: var(--bl-header-bg, #ffffff) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
body.header-transparent.header-scroll-solid.header-scrolled.header-shadow-off .site-header {
	box-shadow: none !important;
}

/* Overlay-hero mode WITHOUT breaking sticky header.
   Keep position:sticky on the header, LIFT the CONTENT WRAPPER UP so the
   leading hero block (cover, heading, etc.) slides UNDERNEATH the transparent
   sticky header. This way sticky + transparent + overlay all coexist safely. */

/* (1) Overlay pages always have content padding-top = 0 first. */
body.header-overlay {
	--bl-content-padding-top: 0px;
}

/* (2) Lift = the exact height of the sticky header so the hero block can
   slide ALL THE WAY underneath it.

   Priority order (most accurate wins):
     1. --bl-overlay-lift-actual: injected dynamically by banana-header.js
        using the REAL computed height of #masthead at runtime. This is the
        most accurate value because it accounts for the actual rendered size
        of the logo line-height, customizer padding changes, custom fonts,
        and any other browser layout decisions that can change the header
        height from our static estimate.
     2. --bl-overlay-lift:    static fallback computed from customizer vars
        (2*padding + 28px logo). Good enough for most cases but can drift by
        10-15px when custom logo/fonts are used.
     3. 80px literal: final absolute floor fallback if all CSS vars are
        somehow unpopulated. */
body.header-overlay {
	--bl-overlay-lift: calc((var(--bl-header-padding, 16px) * 2) + 28px);
	--bl-overlay-lift-final: var(--bl-overlay-lift-actual,
	                             var(--bl-overlay-lift,
	                               80px));
}

/* (3) Apply the negative lift ONLY when AT THE TOP (not scrolled), so when
   scrolled the content flows normally under the now-solid header. */
body.header-overlay:not(.header-scrolled) #content.site-content > .site-main {
	margin-top: calc(-1 * var(--bl-overlay-lift-final)) !important;
	position: relative;
	z-index: 1;
}

/* Scrolled state: remove the lift so content sits normally below solid header */
body.header-overlay.header-scrolled #content.site-content > .site-main {
	margin-top: 0 !important;
}

/* (4) BONUS: when the header is BOTH transparent + overlay at the very top,
   we don't want the white BODY background color to show "through" the
   transparent header while the hero is sliding into place — this is what
   caused the earlier "perception bug" that the header wasn't transparent at
   all (it WAS transparent but body was white behind it). */
body.header-overlay.header-transparent:not(.header-scrolled),
body.header-transparent:not(.header-scrolled) {
	background-color: transparent !important;
}
body.header-overlay.header-transparent:not(.header-scrolled) div#page.site,
body.header-transparent:not(.header-scrolled) div#page.site {
	background-color: transparent !important;
}

/* When overlay + transparent + not scrolled: ensure text on dark hero images
   is still readable (subtle fallback for dark backgrounds): */
body.header-overlay.header-transparent:not(.header-scrolled) .site-header a,
body.header-overlay.header-transparent:not(.header-scrolled) .site-title a,
body.header-overlay.header-transparent:not(.header-scrolled) .site-description,
body.header-overlay.header-transparent:not(.header-scrolled) .main-navigation li a {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* LP 透明時: トップレベルのメニュー色。サブメニューは通常色のまま。 */
body.is-front-page-lp.header-transparent:not(.header-scrolled) .site-header {
	color: var(--bl-lp-menu-link, #ffffff);
}
body.is-front-page-lp.header-transparent:not(.header-scrolled) .site-header a,
body.is-front-page-lp.header-transparent:not(.header-scrolled) .site-title a,
body.is-front-page-lp.header-transparent:not(.header-scrolled) .site-description {
	color: var(--bl-lp-menu-link, #ffffff);
}
body.is-front-page-lp.header-transparent:not(.header-scrolled) .main-navigation > ul > li > a {
	color: var(--bl-lp-menu-link, #ffffff);
}

body.is-front-page-lp.header-transparent.header-hide-branding:not(.header-scrolled) .site-branding {
	display: none;
}

.admin-bar .site-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	padding-bottom: 16px;
	gap: 24px;
	flex-wrap: nowrap;
}

.site-branding {
	flex-shrink: 0;
	min-width: 0;
}

.site-title {
	font-weight: var(--bl-weight-logo, 700);
	line-height: 1.2;
}

.site-description {
	font-size: 0.85em;
	opacity: 0.75;
	margin-top: 4px;
}

.custom-logo-link img {
	max-height: 60px;
	width: auto;
	display: block;
}

/* Header nav base */
.main-navigation {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	justify-content: flex-end;
}

body.primary-menu-left .main-navigation { justify-content: flex-start; }
body.primary-menu-center .main-navigation { justify-content: center; }
body.primary-menu-right .main-navigation { justify-content: flex-end; }

body.primary-menu-hide .main-navigation > ul,
body.primary-menu-hide .main-navigation > #primary-menu,
body.primary-menu-hide .main-navigation .primary-menu-fallback {
	display: none !important;
}

@media screen and (max-width: 768px) {
	body.primary-menu-hide .main-navigation > ul,
	body.primary-menu-hide .main-navigation > #primary-menu,
	body.primary-menu-hide .main-navigation .primary-menu-fallback {
		display: none !important;
	}
}

body.primary-menu-hide.menu-toggle-always .menu-toggle {
	display: none !important;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0 24px;
}

.main-navigation ul ul {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	background: #fff;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
	min-width: 200px;
	display: block;
	padding: 8px 0;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	left: 100%;
}

.main-navigation ul ul a {
	width: 100%;
	padding: 10px 18px;
	color: inherit;
	display: block;
	white-space: nowrap;
	box-sizing: border-box;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
	padding: 8px 0;
}

/* Mobile toggle button — visual styling GLOBAL (applies at ALL widths, not just mobile).
   This defeats WordPress global-styles default button gray background (rgb(230,230,230))
   and wide padding so forced desktop hamburgers look like hamburgers, not flat buttons. */
.menu-toggle {
	/* Layout inside the button: three lines stacked vertically */
	display: none;  /* default hidden; media queries + mobile-toggle-always override */
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 5px;

	/* Fixed size square button — never grows into a wide rectangle */
	width: 44px !important;
	height: 44px !important;
	min-width: 44px;
	min-height: 44px;
	padding: 10px !important;
	box-sizing: border-box;

	/* Kill ALL browser / WP default button chrome */
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	cursor: pointer;
	color: inherit !important;
	line-height: 1;
	margin: 0;
	overflow: hidden;
}

.menu-toggle:hover {
	opacity: 0.7;
}

/* Desktop menu rule: HIDE toggle by default on >= 769px.
   The base .menu-toggle { display:none } above already handles this, but
   we keep this explicit with !important so later rules must be !important too. */
@media screen and (min-width: 769px) {
	.menu-toggle {
		display: none !important;
	}

	.main-navigation ul {
		display: flex;
	}
}

/* Mobile (≤768px): show the toggle as inline-flex by default */
@media screen and (max-width: 768px) {
	.menu-toggle {
		display: inline-flex !important;
	}
}

body.mobile-toggle-left .menu-toggle { order: -1; }
body.mobile-toggle-center .main-navigation { justify-content: center; }
body.mobile-toggle-right .menu-toggle { order: 99; }

.menu-toggle-bar {
	display: block !important;
	width: 100% !important;
	height: 2px !important;
	background: currentColor !important;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) {
	opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* "Always show toggle (desktop too)" option.
   Must RESET every visual property with !important because this rule needs
   to win over the @media (min-width:769px) { display:none !important; } above. */
body.mobile-toggle-always .menu-toggle {
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: center !important;
	gap: 5px !important;
	width: 44px !important;
	height: 44px !important;
	padding: 10px !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	color: inherit !important;
	line-height: 1 !important;
	margin: 0 !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

@media screen and (max-width: 768px) {
	.header-inner {
		padding-top: 12px;
		padding-bottom: 12px;
		flex-wrap: wrap;
	}

	.main-navigation {
		width: 100%;
		justify-content: space-between !important;
	}

	.main-navigation ul,
	.main-navigation.toggled ul {
		width: 100%;
		flex-direction: column;
		gap: 0;
		margin-top: 12px;
		border-top: 1px solid rgba(128, 128, 128, 0.15);
		padding-top: 12px;
	}

	.main-navigation ul li {
		width: 100%;
	}

	.main-navigation ul ul {
		position: static;
		box-shadow: none;
		background: transparent;
		padding-left: 16px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.main-navigation ul ul a {
		padding: 8px 0;
	}

	.main-navigation ul ul li:hover > ul,
	.main-navigation ul ul li.focus > ul {
		left: 0;
	}
}

/* Content area */
.site-content {
	padding-top: 32px;
	padding-bottom: 48px;
}

.site-main {
	margin-bottom: 0;
}

/* Entry */
.entry-title {
	margin-top: 0;
}

.entry-header,
.page-header {
	text-align: var(--bl-title-align, left);
}

.entry-meta,
.entry-footer {
	font-size: 0.9em;
	opacity: 0.75;
}

.entry-meta a,
.entry-footer a {
	text-decoration: none;
}

/* Footer */
.site-footer {
	padding-top: 48px;
}
.site-footer.footer-minimal {
	padding-top: 0;
}

.footer-widgets {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	padding-bottom: 40px;
}

.footer-widget-col .widget {
	margin-bottom: 24px;
}

.footer-widget-title {
	margin-top: 0;
	margin-bottom: 16px;
	font-size: 1.05em;
}

@media screen and (max-width: 768px) {
	.footer-widgets {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.footer-menus {
	padding: 24px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
}

.footer-menu ul.footer-list,
.social-menu ul.social-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.social-list li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
	border-radius: 50%;
	border: 1px solid currentColor;
	opacity: 0.9;
	padding: 0 8px;
}

.copyright-text {
	padding: 20px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 0.9em;
	opacity: 0.85;
}
.copyright-text.copyright-only {
	border-top: none;
	padding: 14px 0;
}

.copyright-left   { text-align: left; }
.copyright-center { text-align: center; }
.copyright-right  { text-align: right; }

/* Posts list */
article.post,
article.page {
	margin: 0 0 2.5em;
}

.post-thumbnail {
	margin-bottom: 16px;
}

.post-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/*--------------------------------------------------------------
# アーカイブ / 投稿一覧（リスト表示・カード表示）
  レイアウトはカスタマイザー（アーカイブ / 投稿一覧）で切り替える。
  PHP 側は .post-list に post-list-list / post-list-card と
  post-list-cols-N を付けるだけで、以降の見た目はここが持つ。
--------------------------------------------------------------*/
.post-list {
	margin-bottom: 40px;

	/* アイキャッチの縦横比。カスタマイザーが .post-list-ratio-* を付けて上書きする。 */
	--bl-archive-ratio: 4 / 3;
}

.post-list-ratio-16-9 { --bl-archive-ratio: 16 / 9; }
.post-list-ratio-16-10 { --bl-archive-ratio: 16 / 10; }
.post-list-ratio-3-2 { --bl-archive-ratio: 3 / 2; }
.post-list-ratio-4-3 { --bl-archive-ratio: 4 / 3; }
.post-list-ratio-1-1 { --bl-archive-ratio: 1 / 1; }
.post-list-ratio-4-5 { --bl-archive-ratio: 4 / 5; }
.post-list-ratio-3-4 { --bl-archive-ratio: 3 / 4; }

.post-list .post-list-item {
	margin: 0;
}

.post-list .entry-title {
	margin: 0 0 8px;
	text-align: left;
}

.post-list .entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin-bottom: 10px;
	font-size: 0.85em;
	opacity: 0.75;
}

.post-list .entry-summary {
	margin: 0 0 10px;
}

.post-list .entry-tags {
	font-size: 0.85em;
	opacity: 0.75;
}

.post-list .entry-more {
	margin: auto 0 0;
	padding-top: 8px;
}

.post-list .more-link {
	font-size: 0.9em;
	font-weight: 500;
}

.post-list .post-list-thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;

	/* 縦長・横長が混在しても行やカードの高さが揃うよう比率を固定する */
	aspect-ratio: var(--bl-archive-ratio);
	object-fit: cover;
}

/* 「元画像の比率のまま」を選んだときは切り抜きを一切しない */
.post-list-ratio-auto .post-list-thumb img {
	aspect-ratio: auto;
	object-fit: initial;
}

/* ---- リスト表示：サムネイル左、本文右 ---- */
.post-list-list .post-list-item {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	padding-bottom: 32px;
	margin-bottom: 32px;
	border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.post-list-list .post-list-item:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.post-list-list .post-list-thumb {
	flex: 0 0 260px;
	max-width: 40%;
}

.post-list-list .post-list-body {
	flex: 1 1 auto;
	min-width: 0;
}

@media screen and (max-width: 600px) {
	.post-list-list .post-list-item {
		flex-direction: column;
		gap: 14px;
	}
	.post-list-list .post-list-thumb {
		flex: none;
		max-width: 100%;
	}
}

/* ---- カード表示：グリッド ----
   列数はカスタマイザーの指定が上限で、1列あたりが --bl-archive-min を
   下回る幅では auto-fill が自動的に列を減らす。
   これでサイドバーの有無や画面幅ごとのブレークポイントを個別に
   書かなくても、2〜6列すべてが破綻せずに収まる。 */
.post-list-card {
	--bl-archive-cols: 3;
	--bl-archive-gap: 32px;
	--bl-archive-min: 220px;

	display: grid;
	gap: var(--bl-archive-gap);
	grid-template-columns: repeat(
		auto-fill,
		minmax(
			max(
				var(--bl-archive-min),
				calc(
					(100% - (var(--bl-archive-cols) - 1) * var(--bl-archive-gap)) /
					var(--bl-archive-cols)
				)
			),
			1fr
		)
	);
}

.post-list-cols-2 { --bl-archive-cols: 2; }
.post-list-cols-3 { --bl-archive-cols: 3; }
.post-list-cols-4 { --bl-archive-cols: 4; }
.post-list-cols-5 { --bl-archive-cols: 5; }
.post-list-cols-6 { --bl-archive-cols: 6; }

/* 列数が多いほど、余白と1枚あたりの下限を詰めないと指定通りに並ばない。
   サイドバーありのコンテンツ幅（約820px）で6列が成立する値にしてある。 */
.post-list-cols-5 {
	--bl-archive-gap: 20px;
	--bl-archive-min: 140px;
}
.post-list-cols-6 {
	--bl-archive-gap: 16px;
	--bl-archive-min: 120px;
}

.post-list-card .post-list-item {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(128, 128, 128, 0.15);
	border-radius: 8px;
}

.post-list-card .post-list-thumb {
	display: block;
}

.post-list-card .post-list-thumb img {
	border-radius: 0;
}

.post-list-card .post-list-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 16px 18px 20px;
}

.post-list-card .entry-title {
	font-size: 1.05rem;
	line-height: 1.5;
}

.post-list-card .entry-summary {
	font-size: 0.9em;
}

@media screen and (max-width: 600px) {
	.post-list-card {
		--bl-archive-gap: 20px;
		--bl-archive-min: 240px;
	}

	.post-list-card .entry-meta {
		gap: 2px 10px;
	}
}

.entry-content > *,
.entry-summary > *,
.page-content > * {
	max-width: 100%;
}

.entry-content img,
.page-content img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

/* Comments */
.comments-area {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid rgba(128, 128, 128, 0.15);
}

.comment-list {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}

.comment-body {
	padding: 16px 0;
	border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

/* Forms polish */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
	padding: 10px 12px;
	border-radius: 4px;
	max-width: 100%;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	padding: 10px 18px;
	border-radius: 4px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	opacity: 0.85;
}

/* Widgets */
.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget ul li {
	padding: 6px 0;
	border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

/* Pagination */
.pagination,
.posts-navigation,
.post-navigation,
.comment-navigation {
	margin: 32px 0;
}

.nav-links {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: space-between;
}

.page-numbers {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid rgba(128, 128, 128, 0.2);
	border-radius: 4px;
	text-decoration: none;
}

.page-numbers.current {
	background: var(--bl-link, #2563eb);
	color: #fff;
	border-color: transparent;
}

/* WooCommerce base polish */
.woocommerce .products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0;
}

@media screen and (max-width: 1024px) {
	.woocommerce .products { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 768px) {
	.woocommerce .products { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 480px) {
	.woocommerce .products { grid-template-columns: 1fr; }
}

.woocommerce .products li.product {
	margin: 0;
}

.woocommerce ul.products li.product a img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}

.woocommerce .woocommerce-loop-product__title {
	font-size: 1em;
	margin: 12px 0 8px;
}

.woocommerce .price {
	display: block;
	font-weight: 700;
	margin-bottom: 12px;
}

.woocommerce .button {
	display: inline-block;
	text-decoration: none;
	padding: 8px 14px;
	border-radius: 4px;
	font-size: 0.9em;
}

/*--------------------------------------------------------------
# bananaleaf Sidebar Layout / Pagination polish
--------------------------------------------------------------*/

body.has-sidebar #primary {
	width: auto;
}

/*--------------------------------------------------------------
# Content layout: no-sidebar = full-bleed root padding (Gutenberg friendly)
#               : has-sidebar = fixed grid layout with sidebar
--------------------------------------------------------------*/

/* No-sidebar: full-bleed container with root-level padding
   so alignfull / alignwide blocks can break out. */

/* 横スクロール防止。body には付けないこと。
   body に overflow-x:hidden を書くと overflow-y が visible から auto に
   格上げされて body 自身がスクロールコンテナになり、その内側の
   position:sticky（ヘッダー）がビューポートではなく body を基準にしてしまい
   一切動かなくなる。
   ルート要素の overflow はビューポートに伝播し、html 自身は visible 扱いの
   ままになるため、html にだけ書けば sticky を壊さずに横あふれを止められる。
   clip は非対応ブラウザ向けに hidden をフォールバックとして先に置く。 */
html {
	overflow-x: hidden;
	overflow-x: clip;
}

/* フロントページに固定ページを割り当てたとき（LP用途）は、固定ヘッダーと
   先頭の全幅ブロックの間に隙間を作らない。

   #content の上パディングは :root の --bl-content-padding-top を
   body.is-front-page-lp 側で 0px に差し替えることで消している（下記 :root 参照）。
   ここで再度 padding を打ち消す必要はない。

   残る仕事は「先頭ブロック自身が持つ上マージン」の打ち消しだけ。
   ブロック側が style 属性で直接マージンを書いてくることがあるため、
   ここだけは !important が要る。 */
body.is-front-page-lp .entry-content {
	--wp--style--block-gap: 0;
	row-gap: 0;
	/* _s 既定の margin: 1.5em 0 0 が、タイトル非表示の LP では
	   透明ヘッダーとヒーローの間に 24px の隙間になる。 */
	margin-block-start: 0;
}

body.is-front-page-lp .entry-content > :first-child {
	margin-block-start: 0 !important;
	padding-block-start: 0 !important;
	border-block-start: 0 !important;
}

#page.site > #content.site-content > #primary {
	max-width: none;
	width: 100%;
	display: block;
}

/* #content.site-content の上パディングは --bl-content-padding-top で切り替える。
   通常は 40px、LP では body 側で 0px に差し替わる。body スコープのカスタム
   プロパティが素直にカスケードするだけなので、詳細度の勝負が要らない。 */
:root {
	--bl-wide-width: calc(var(--bl-container, 1200px) + 200px);
	--bl-content-padding: 20px;
	--bl-content-padding-top: 40px;
}
body.is-front-page-lp {
	--bl-content-padding-top: 0px;
}

#page.site > #content.site-content {
	display: block;
	max-width: none;
	width: 100%;
	box-sizing: border-box;
	padding: var(--bl-content-padding-top) var(--bl-content-padding, 20px) 48px;
	overflow-x: clip;
}

/* 本文の最大幅。

   ラッパー（.site-main / article / .entry-content）ではなく、その直下の子要素だけを
   絞るのが要点。ラッパーは全幅のまま残るので、alignfull は下の負マージン方式で
   これまで通り画面端まで届く。ラッパー側を絞ると alignfull も一緒に縮む。

   --bl-content-max はページ種別に応じて PHP が出力する（inc/banana-layout.php）。
   既定値は none なので、カスタマイザーで指定しない限り従来のフルワイドのまま。

   浮動する alignleft / alignright は自前の左右マージンを持つので除外する。
   Spectra の Container は内側幅をブロック側で持つので、ここでは触らない。 */
body.no-sidebar .site-main > *:not(article):not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright):not(.wp-block-uagb-container),
body.no-sidebar .site-main > article > *:not(.entry-content),
body.no-sidebar .site-main > article > .entry-content > *:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright):not(.wp-block-uagb-container) {
	max-width: var(--bl-content-max, none);
	margin-left: auto;
	margin-right: auto;
}

/* Alignwide: slightly wider than content baseline */
.entry-content > .alignwide,
.site-main > .alignwide {
	max-width: var(--bl-wide-width);
	width: auto;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Alignfull: bleed to the viewport edges (LP-ready full-color sections).
   We use margin negative of root padding plus width=100%.
   Avoiding 100vw entirely prevents any scrollbar-offset misalignment. */
.entry-content > .alignfull,
.site-main > .alignfull {
	width: calc(100% + (2 * var(--bl-content-padding, 20px)));
	max-width: calc(100% + (2 * var(--bl-content-padding, 20px)));
	margin-left: calc(-1 * var(--bl-content-padding, 20px)) !important;
	margin-right: calc(-1 * var(--bl-content-padding, 20px)) !important;
	position: relative;
	left: auto;
	right: auto;
	transform: none;
	box-sizing: border-box;
}

/* When sidebar is active: fall back to constrained grid so blocks don't bleed */
body.has-sidebar #page.site > #content.site-content {
	max-width: var(--bl-container, 1200px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 40px;
	padding: 40px var(--bl-content-padding, 20px);
	align-items: start;
}
body.has-sidebar.sidebar-left #page.site > #content.site-content {
	grid-template-columns: 300px 1fr;
}
body.has-sidebar.sidebar-left #primary {
	order: 2;
}
body.has-sidebar.sidebar-left #secondary.widget-area {
	order: 1;
}

body.has-sidebar .site-main > *:not(.alignfull):not(.alignwide),
body.has-sidebar .entry-content > *:not(.alignfull):not(.alignwide),
body.has-sidebar .entry-header,
body.has-sidebar .entry-footer,
body.has-sidebar .post-thumbnail,
body.has-sidebar .comments-area,
body.has-sidebar .comment-navigation,
body.has-sidebar .post-navigation,
body.has-sidebar .site-main > .page-header,
body.has-sidebar .site-main > .pagination,
body.has-sidebar .site-main > .posts-navigation {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.has-sidebar .entry-content > .alignwide,
body.has-sidebar .entry-content > .alignfull,
body.has-sidebar .site-main > .alignwide,
body.has-sidebar .site-main > .alignfull {
	max-width: none;
	width: auto;
	margin-left: 0 !important;
	margin-right: 0 !important;
	position: static;
	left: auto;
	right: auto;
	transform: none;
}

#secondary.widget-area {
	display: block;
}

@media screen and (max-width: 960px) {
	body.has-sidebar #page.site > #content.site-content,
	body.has-sidebar.sidebar-left #page.site > #content.site-content {
		grid-template-columns: 1fr;
		max-width: var(--bl-container, 1200px);
	}
	body.has-sidebar.sidebar-left #primary,
	body.has-sidebar.sidebar-left #secondary.widget-area {
		order: unset;
	}
}

/* Pagination polish */
.site-main .pagination,
.site-main .posts-navigation,
.site-main .post-navigation,
.site-main .comment-navigation {
	margin: 40px 0 0;
}

.pagination .nav-links {
	justify-content: center;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	text-decoration: none;
	transition: all 0.2s ease;
	font-weight: 600;
	line-height: 1;
}

.page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* Header sticky non-js fallback */
/* SNS icon style polish */
.social-list li a i {
	font-size: 1em;
}

.social-list li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid currentColor;
	opacity: 0.9;
	transition: all 0.2s ease;
}

.social-list li a:hover {
	opacity: 1;
	transform: translateY(-1px);
}

/*--------------------------------------------------------------
# Sticky Footer (MODERN FLEX IMPLEMENTATION — 2026-08-28 FINAL FIX v2)
#
#   CORRECT DOM STRUCTURE (verified from header.php / footer.php):
#   ─────────────────────────────────────────────────────────────────
#     <body>
#       <div id="page" class="site">          ← ONLY child of body
#         <a class="skip-link">                ← (display:none normally)
#         <header id="masthead">
#         <div id="content" class="site-content">   ← MAIN WRAPPER
#           <main id="primary">...</main>
#           [get_sidebar if has-sidebar]
#         </div>
#         <footer id="colophon">
#       </div>
#       [script tags, wp_footer() output — injected after </div><!--#page-->]
#     </body>
#
#   BUG IN v1 implementation (the one that was still letting the footer
#   "float up"):
#   ─────────────────────────────────────────────────────────────────
#     v1 attached display:flex / min-height:100svh to <body> and made
#     #page a flex:1 child. BUT <body> only has ONE meaningful child
#     (#page.site — skip-link and script tags do not participate in
#     layout). There was NO flex sibling for the footer to push against
#     at the body level. Flex-grow did literally nothing useful, the
#     short-page footer never reached viewport bottom.
#
#   FINAL CORRECT LAYOUT:
#   ─────────────────────────────────────────────────────────────────
#     (1) body → min-height:100svh ONLY. No flex here. Normal flow.
#         (body's height is determined by #page inside it)
#
#     (2) div#page.site → THE FLEX CONTAINER.
#         display:flex, flex-direction:column, min-height:100svh
#         This is the ONLY element with exactly THREE flex siblings:
#           • header  (flex-shrink:0, fixed size)
#           • #content (flex:1 0 auto → GROWS to fill remaining space
#                       between header and footer on short pages)
#           • footer  (flex-shrink:0, fixed size)
#
#     (3) #page.site > footer#colophon → static flow, flex-shrink:0
#         (we fully removed position:absolute which was the root of
#          scrollHeight === viewportHeight / scrollY=0 deadlock bug)
#
#     GUARANTEES (this version):
#       ✅ Short pages (content < viewport): footer sits at VIEWPORT BOTTOM
#       ✅ Long pages  (content > viewport): footer sits at DOCUMENT BOTTOM
#       ✅ body scrollHeight > viewport possible → window.scrollY moves
#       ✅ No absolute in ancestor chain → position:sticky works natively
#       ✅ Admin bar shrinks the wrapper MIN height (not actual height)
#--------------------------------------------------------------*/

/* --- (1) html / body: MINIMUM setup. No flex, no absolute. --- */
html {
	height: auto;
	box-sizing: border-box;
}

body {
	/* body に min-height は付けない。#page が唯一の通常フローの子であり
	   すでに min-height を持っているため、body の高さはそれで決まる。
	   body 側にも 100svh を書くと、管理バー表示時に #page だけが
	   calc(100svh - 32px) に縮み、body との差 32px がフッターの下に
	   余白として残ってしまう。 */

	box-sizing: border-box;
	margin: 0;

	/* NO display:flex on body. Keep normal flow. Flex lives on #page. */
	position: relative;
}

*, *::before, *::after {
	box-sizing: inherit;
}

/* --- (2) div#page.site → THE FLEX COLUMN WRAPPER ---
         This is where the magic happens. #page always has
         header / #content / footer as its flex children. */
#page.site {
	display: flex;
	flex-direction: column;

	/* The wrapper itself must claim AT LEAST the viewport height.
	   On short pages it will be exactly 100svh → footer hits bottom.
	   On long pages min-height:100svh is ignored, height grows to
	   content + header + footer → footer is after content (correct). */
	min-height: 100vh;
	min-height: 100svh;

	position: relative;
	box-sizing: border-box;
	width: 100%;
}

/* Also ensure the skip-link does not accidentally influence the flex layout. */
#page.site > a.skip-link {
	flex: 0 0 auto;
}

/* --- (3) Header: fixed size, never shrink or grow. --- */
#page.site > header#masthead.site-header {
	flex: 0 0 auto;
	/* No explicit height here — let the content (logo + menu) decide it.
	   banana-header.js will measure getBoundingClientRect().height at
	   runtime and write --bl-overlay-lift-actual for hero overlap. */
}

/* --- (4) #content.site-content → THE FLEX-GROW WORKHORSE. ---
         This element grows to consume ALL empty vertical space between
         the header and footer. This is what forces the footer to the
         bottom of the viewport on SHORT pages. */
#page.site > #content.site-content {
	flex: 1 0 auto;
	width: 100%;

	/* KEEP display:block on #content.
	   The normal block formatting context lets the internal #primary
	   margin collapse behave exactly like WordPress expects. We only
	   use FLEX at the #page shell level; we do NOT nest flex inside
	   flex inside flex — that was causing the "footer still floats up
	   sometimes" regression. */
	display: block;
}

/* --- (5) Footer: fixed size, static flow, never shrink.
         Absolute position is GONE FOREVER. It was causing scrollY=0. */
#page.site > #colophon.site-footer {
	flex: 0 0 auto;

	/* 最後の flex アイテムの margin-top:auto は、列に残った余白を
	   すべてフッターの上へ押し出す。#content の flex-grow が
	   何らかの理由で余白を吸えなかった場合でも、フッターは必ず
	   下端に着く。 */
	margin-top: auto;

	position: static !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	width: 100%;
	z-index: 1;
}

/* --- (6) Admin bar offsets.
   When logged in, WordPress adds #wpadminbar (32px / 46px) and adds
   body.admin-bar + margin-top:32px / 46px on the body element. We
   need to shrink the MIN height of #page by the same 32/46px so the
   flex row still ends at viewport bottom on short pages.

   Important: we shrink MIN-HEIGHT, not HEIGHT, so on long pages the
   page can still grow as tall as content wants. */
@media screen and (min-width: 783px) {
	body.admin-bar #page.site {
		min-height: calc(100vh - 32px);
		min-height: calc(100svh - 32px);
	}
}
@media screen and (max-width: 782px) {
	body.admin-bar #page.site {
		min-height: calc(100vh - 46px);
		min-height: calc(100svh - 46px);
	}
}

/*--------------------------------------------------------------
# ページトップへ戻る
--------------------------------------------------------------*/
.to-top {
	--bl-totop-size: 44px;
	position: fixed;
	bottom: max(20px, env(safe-area-inset-bottom, 0px));
	z-index: 9990;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--bl-totop-size);
	height: var(--bl-totop-size);
	margin: 0;
	padding: 0;
	border: 2px solid transparent;
	background: var(--bl-totop-bg, #222);
	color: var(--bl-totop-color, #fff);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background-color 0.2s ease;
}

.to-top.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.to-top-right {
	right: max(20px, env(safe-area-inset-right, 0px));
}

.to-top-left {
	left: max(20px, env(safe-area-inset-left, 0px));
}

.to-top-circle {
	border-radius: 50%;
}

.to-top-rounded {
	border-radius: 10px;
}

.to-top-square {
	border-radius: 0;
}

.to-top-small {
	--bl-totop-size: 36px;
}

.to-top-large {
	--bl-totop-size: 52px;
}

.to-top-small .to-top-icon {
	width: 16px;
	height: 16px;
}

.to-top-large .to-top-icon {
	width: 22px;
	height: 22px;
}

.to-top-outline {
	background: transparent;
	border-color: var(--bl-totop-bg, #222);
	color: var(--bl-totop-bg, #222);
	box-shadow: none;
}

.to-top:hover,
.to-top:focus-visible {
	filter: brightness(1.08);
}

.to-top:focus-visible {
	outline: 2px solid var(--bl-totop-bg, #222);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.to-top {
		transition: none;
	}
}