/*
Theme Name: Lesser Theme
Author: Lesser
Description: バンド・アーティストの公式サイト向けのシンプルなテーマ。全画面のトップ画像、中央揃えのメニュー、スクロールで現れる追従バーと右から開くドロワーメニューを備えています。
Version: 0.10.2
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lesser
Tags: one-column, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   目次
   1.  設定値（色・フォント・幅）
   2.  リセット・基本
   3.  共通部品（container / ボタン / セクション見出し）
   4.  トップの全画面エリア（.hero）
   5.  下層ページの全画面見出し（.page-hero）
   6.  メインナビ（.site-nav）
   7.  追従バー（.bar）
   8.  ドロワー（.drawer）
   9.  SNS アイコン
   10. 本文（投稿・固定ページ）
   11. フッター
   12. スマホ（768px 以下）
   13. WordPress 標準クラス
   14. アニメーション（ふわっと表示）
   15. 全画面見出し（カバーブロックのスタイル「全画面見出し（固定背景）」）
   16. ブロックの調整（全幅・YouTube・最新の投稿・表など）
   17. NEWS カード（RECENT POSTS など）
   18. NEWS 記事ページ
   19. NEWS 一覧ページ
   20. 追加のアニメーション（ホバー・ドロワー・ページ切り替え）
   21. 絵文字
   22. メンバー表記
   23. お問い合わせフォーム（Contact Form 7）
   24. 小さめの枠線ボタン（LISTEN NOW など）
   25. フィルムのざらつき
   26. MERCH（商品画像をそろえる）
   27. MERCH カード・一覧・商品ページ（Lesser Core）
   28. 細かな調整（注意書き・ABOUT の見出し・横並びボタン）
   29. SHOWS の表・一覧ページ（Lesser Core）
   30. コメント欄（コメントを許可した記事だけ表示）
   31. UI アニメーション（読み込み・スクロール・ホバー・フォーム）
   ========================================================================== */


/* 1. 設定値 ------------------------------------------------------------------
   ここの値を変えるとサイト全体に反映されます。 */
:root {
	--lesser-bg: var(--wp--preset--color--base, #fff);
	--lesser-text: var(--wp--preset--color--contrast, #111);
	--lesser-sub: var(--wp--preset--color--sub, #666);
	--lesser-muted: var(--wp--preset--color--muted, #767676); /* 白地で読みやすい濃さ（コントラスト比 4.5 以上） */
	--lesser-line: var(--wp--preset--color--line, #eee);

	--lesser-font-body: var(--wp--preset--font-family--body, Helvetica, Arial, sans-serif);
	--lesser-font-head: var(--wp--preset--font-family--heading, "Roboto Condensed", sans-serif);

	--lesser-wide: 1200px;     /* 中身の最大幅 */
	--lesser-narrow: 768px;    /* 文章の最大幅 */
	--lesser-gutter: 15px;     /* 画面が狭いときの左右の余白 */
	--lesser-bar-height: 50px; /* 追従バーの高さ */
	--lesser-admin-bar: 0px;   /* ログイン中の管理バー分（下で自動設定） */
}

.admin-bar {
	--lesser-admin-bar: 32px;
}

@media (max-width: 782px) {
	.admin-bar {
		--lesser-admin-bar: 46px;
	}
}


/* 2. リセット・基本 ---------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* 1rem = 10px にする。
	   旧テーマと同じ基準。旧テーマ時代に本文へ直接書いた
	   「font-size: 2rem」などが、当時と同じ大きさ（20px）で表示される。 */
	font-size: 62.5%;
	/* 全幅の写真などで横スクロールが出ないようにする */
	overflow-x: clip;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--lesser-bar-height) + var(--lesser-admin-bar));
	-webkit-text-size-adjust: 100%;
}

body {
	overflow-x: clip;
	margin: 0;
	background: var(--lesser-bg);
	color: var(--lesser-text);
	font-family: var(--lesser-font-body);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* 画像・動画は枠からはみ出さないように縮める。
   ※ iframe（YouTube など）は height:auto にすると高さが 150px に潰れるので、
     ここには含めない（16. ブロックの調整 で 16:9 を指定）。 */
img,
video {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

iframe {
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.3s;
}

a:hover {
	opacity: 0.6;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

button {
	font: inherit;
	color: inherit;
}


/* 3. 共通部品 ---------------------------------------------------------------- */

/* 中身の幅をそろえる箱 */
.container {
	width: 100%;
	max-width: calc(var(--lesser-wide) + var(--lesser-gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--lesser-gutter);
}

.site-main {
	padding: 100px 0;
}

/* 枠線のボタン（例：LISTEN ON SPOTIFY） */
.button-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
	display: inline-block;
	padding: 0 25px;
	border: 2px solid var(--lesser-text);
	border-radius: 0;
	background: none;
	color: var(--lesser-text);
	font-family: var(--lesser-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 45px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* セクション見出し（左に「NEWS」、右に「MORE >」） */
.section-head {
	display: flex;
	align-items: flex-end;  /* 「NEWS」と「MORE >」の下端をそろえる */
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
}

.section-title {
	margin: 0;
	font-family: var(--lesser-font-head);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.6em;
	text-transform: uppercase;
}

/* 見出しの中の要素に、本文用の上下の余白が付かないようにする */
.section-head > *,
.entry__content .section-head > * {
	margin: 0 !important;
}

.more-link,
.entry__content .more-link {
	text-decoration: none;
}

/* 「VIEW ALL >」：枠のない文字リンク。マウスを乗せると「>」が右へすっと動く
   （「>」は文字ではなく CSS で付けているので、本文には「VIEW ALL」とだけ書けばよい） */
.more-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--lesser-text);
	font-family: var(--lesser-font-head);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
}

.more-link::after {
	content: ">";
	display: inline-block;
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.more-link:hover {
	opacity: 1;
}

.more-link:hover::after {
	transform: translateX(6px);
}

/* 写真の上に大きな白文字を載せる帯（例：TOUR DATES / ABOUT） */
.section-banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	background: #111;
}

.section-banner__title,
.page-hero__title {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0 var(--lesser-gutter);
	color: #fff;
	font-family: var(--lesser-font-head);
	font-size: 30px;      /* 以前は 60px。大きすぎて重たく見えたので半分に */
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.2em;
	/* 字間を空けると最後の文字の後ろにも余白ができて左に寄って見えるので、
	   同じ分だけ左に余白を足して真ん中に見えるようにする */
	padding-left: 0.2em;
	text-align: center;
	text-transform: uppercase;
}

/* 背景に敷く画像・動画（親いっぱいに広げて切り抜く） */
.hero__media,
.page-hero__media,
.section-banner__media {
	position: absolute;
	inset: 0;
}

.hero__media img,
.hero__media video,
.page-hero__media img,
.section-banner__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* 4. トップの全画面エリア ---------------------------------------------------- */
.hero {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 480px;
	overflow: hidden;
	/* 中身をこの枠の形で切り抜く。
	   背景（.hero__media）を画面に固定しても、この枠の外には見えなくなる。 */
	clip-path: inset(0);
	background: #111;
	color: #fff;
}

/* 背景は画面に固定し、effects.js がスクロールに合わせて少しずつ上へ動かす。
   高さを 110% にしているのは、動かしたときに下に隙間ができないようにするため。 */
.hero .hero__media {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 110vh;
	will-change: transform;
}

/* ロゴ：左上（画面の幅・高さの 10% の位置） */
.hero__logo {
	position: absolute;
	top: 10%;
	left: 10%;
	z-index: 1;
	width: 250px;
	margin: 0;
	line-height: 1;
}

.hero__logo a,
.page-hero__logo a {
	display: block;
}

.hero-logo-img {
	display: block;
	width: 100%;
	height: auto;
}

.hero-logo-text {
	display: block;
	font-family: var(--lesser-font-head);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* 下向き矢印 */
.hero__arrow {
	position: absolute;
	bottom: 40px;
	left: 50%;
	z-index: 1;
	width: 24px;
	margin-left: -12px;
	color: #fff;
}

/* 矢印の上下のゆれ（ふわっと表示と動きがぶつからないよう、中の span に付ける） */
.hero__arrow-icon {
	display: block;
	animation: lesser-arrow 2s ease-in-out infinite;
}

.hero__arrow .icon {
	display: block;
	width: 24px;
	height: 24px;
	fill: currentColor;
}

@keyframes lesser-arrow {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__arrow-icon {
		animation: none;
	}
}


/* 5. 下層ページの全画面見出し ------------------------------------------------
   CONTACT や NEWS 記事などの最初に出る、画面いっぱいの写真／動画＋ページ名。
   本文の「全画面見出し（固定背景）」と同じ仕組み：
   枠（.page-hero）を clip-path で窓にし、中の写真は画面に固定する。 */
.page-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	height: 100svh;
	min-height: 480px;
	overflow: hidden;
	clip-path: inset(0);
	background: #111;
}

.page-hero .page-hero__media {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
}

.page-hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 文字を読みやすくするための薄い黒 */
.page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.25);
}

/* ロゴ：トップと同じく左上（画面の 10% の位置） */
.page-hero__logo {
	position: absolute;
	top: 10%;
	left: 10%;
	z-index: 2;
	width: 250px;
	margin: 0;
	color: #fff;
	line-height: 1;
}

/* 下向き矢印は文字・黒幕より手前に */
.page-hero .hero__arrow {
	z-index: 2;
}


/* 6. メインナビ（画像の下・中央揃え） ----------------------------------------- */
.site-nav {
	text-align: center;
}

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

.menu-list--site-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: var(--lesser-wide);
	margin: 10px auto 7px;
	padding: 0 10px;
}

.menu-list--site-nav a {
	display: block;
	padding: 0 15px;
	font-family: var(--lesser-font-head);
	font-size: 11px;
	font-weight: 700;
	line-height: 50px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.site-nav__social {
	justify-content: center;
	padding: 10px 10px 25px;
}


/* 7. 追従バー ----------------------------------------------------------------
   スマホ（768px 以下）だけで使う、画面上部の細いバー（小さいロゴ＋三本線）。
   PC ではメインナビがあるので表示しない（12. スマホ の章で表示に切り替え）。 */
.bar {
	position: fixed;
	top: var(--lesser-admin-bar);
	left: 0;
	z-index: 900;
	width: 100%;
	border-bottom: 1px solid var(--lesser-line);
	background: rgba(255, 255, 255, 0.97);
	transform: translateY(calc(-100% - var(--lesser-admin-bar)));
	transition: transform 0.6s;
}

.is-scrolled .bar {
	transform: translateY(0);
}

@media (min-width: 769px) {
	.bar,
	.drawer {
		display: none;
	}

	/* バーがないので、#NEWS などへ飛んだときの上の余白も不要 */
	html {
		scroll-padding-top: var(--lesser-admin-bar);
	}
}

.bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--lesser-bar-height);
	padding: 0 15px;
}

.bar__logo {
	line-height: 0;
}

.bar__logo .custom-logo {
	width: auto;
	max-width: 120px;
	max-height: 30px;
}

.site-title {
	font-family: var(--lesser-font-head);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* 三本線のメニューボタン */
.menu-button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	width: 30px;
	height: 30px;
	padding: 4px 3px;
	border: 0;
	background: none;
	cursor: pointer;
}

.menu-button__bar {
	display: block;
	height: 2px;
	background: currentColor;
}


/* 8. ドロワー（右から出てくる黒いメニュー） ------------------------------------ */
.drawer__backdrop {
	position: fixed;
	inset: 0;
	z-index: 950;
	visibility: hidden;
}

.drawer__panel {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1000;
	width: 300px;
	max-width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow-y: auto;
	padding: 60px 20px 30px;
	/* 背景色と文字色は「外観 → カスタマイズ → メニュー（ドロワー）の色」で変更できる。
	   文字色は背景の明るさから自動で黒か白を選ぶ（inc/enqueue.php） */
	background: var(--lesser-drawer-bg, rgba(0, 0, 0, 0.95));
	color: var(--lesser-drawer-text, #fff);
	transform: translateX(100%);
	transition: transform 0.6s;
}

.is-drawer-open .drawer__backdrop {
	visibility: visible;
}

.is-drawer-open .drawer__panel {
	transform: translateX(0);
}

.drawer__close {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* × 印 */
.drawer__close-icon::before,
.drawer__close-icon::after {
	content: "";
	position: absolute;
	top: 14px;
	left: 3px;
	width: 24px;
	height: 2px;
	background: currentColor; /* ドロワーの文字色と同じ */
	transform: rotate(45deg);
}

.drawer__close-icon::after {
	transform: rotate(-45deg);
}

.menu-list--drawer {
	margin-bottom: 20px;
}

.menu-list--drawer a {
	display: block;
	font-family: var(--lesser-font-head);
	font-size: 16px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: 0.4em;
	text-align: center;
	text-transform: uppercase;
}

/* ドロワー内の SNS は、文字色の丸に背景色のアイコン（色を反転させた丸） */
.drawer__social {
	justify-content: center;
	gap: 8px;
}

.social-links.drawer__social a {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--lesser-drawer-text, #fff);
	color: var(--lesser-drawer-bg, #111);
}

.social-links.drawer__social .icon {
	width: 12px;
	height: 12px;
}


/* 9. SNS アイコン ------------------------------------------------------------ */
.social-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 55px;
	height: 25px;
}

.social-links .icon {
	width: 15px;
	height: 15px;
	fill: currentColor;
}


/* 10. 本文（投稿・固定ページ） ------------------------------------------------ */
.entry {
	max-width: var(--lesser-narrow);
	margin: 0 auto 80px;
}

.entry__header {
	margin-bottom: 40px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--lesser-line);
}

.entry__title {
	margin: 0 0 5px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.entry__date {
	display: block;
	color: var(--lesser-muted);
	font-family: var(--lesser-font-head);
	font-size: 11px;
	letter-spacing: 0.1em;
}

.entry__content > * {
	margin-top: 0;
	margin-bottom: 20px;
}

.entry__content h2,
.entry__content h3 {
	margin-top: 40px;
	font-family: var(--lesser-font-head);
	font-weight: 700;
	letter-spacing: 0.2em;
}

.entry__content h2 {
	font-size: 18px;
}

.entry__content h3 {
	font-size: 14px;
}

.entry__content a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry__content table {
	width: 100%;
	border-collapse: collapse;
}

.entry__content th,
.entry__content td {
	padding: 15px 10px;
	border-bottom: 1px solid var(--lesser-line);
	text-align: left;
}

.entry__content th {
	font-family: var(--lesser-font-head);
	font-weight: 700;
	letter-spacing: 0.2em;
}

/* 表の行にマウスを乗せると、その行が薄いグレーになる（SHOWS の日程など、どの行を見ているかわかりやすく） */
.entry__content tbody tr td {
	transition: background 0.3s;
}

.entry__content tbody tr:hover td {
	background: #fafafa; /* よく見れば変わっている、くらいの薄さ */
}

.no-results {
	max-width: var(--lesser-narrow);
	margin: 0 auto;
	text-align: center;
}

.navigation.pagination {
	text-align: center;
}

.nav-links .page-numbers {
	display: inline-block;
	min-width: 2.5em;
	padding: 4px 8px;
	font-family: var(--lesser-font-head);
}

.nav-links .page-numbers.current {
	border-bottom: 2px solid currentColor;
}


/* 11. フッター --------------------------------------------------------------- */
.site-footer {
	padding: 80px var(--lesser-gutter) 40px;
	text-align: center;
}

.footer-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5px 20px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	font-family: var(--lesser-font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.site-footer__copyright {
	margin: 0;
	color: var(--lesser-sub);
	font-size: 10px;
}


/* 12. スマホ（768px 以下） ----------------------------------------------------- */
@media (max-width: 768px) {

	.site-main {
		padding: 50px 0;
	}

	/* ロゴは中央に */
	.hero__logo {
		left: 0;
		width: 100%;
		text-align: center;
	}

	.hero__logo .hero-logo-img {
		width: 200px;
		margin: 0 auto;
	}

	/* ロゴは中央に（トップと同じ） */
	.page-hero__logo {
		left: 0;
		width: 100%;
		text-align: center;
	}

	.page-hero__logo .hero-logo-img {
		width: 200px;
		margin: 0 auto;
	}

	.section-banner__title,
	.page-hero__title {
		font-size: 20px;
	}

	.section-title {
		font-size: 16px;
	}

	/* メインナビは隠し、追従バーを常に表示 */
	.site-nav {
		display: none;
	}

	.bar {
		position: sticky;
		transform: none;
	}

	.drawer__panel {
		width: 250px;
	}

	.menu-list--drawer a {
		font-size: 14px;
		line-height: 30px;
	}
}


/* 13. WordPress 標準クラス ---------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	word-wrap: normal !important;
}

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 10000;
	width: auto;
	height: auto;
	padding: 12px 16px;
	clip: auto;
	clip-path: none;
	background: #111;
	color: #fff;
}

.alignleft {
	float: left;
	margin: 0 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0 0 1em 1.5em;
}

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

.wp-caption,
.wp-caption-text,
.gallery-caption,
.wp-element-caption {
	color: var(--lesser-sub);
	font-size: 12px;
}

.sticky,
.bypostauthor {
	display: block;
}


/* 14. アニメーション（ふわっと表示） -----------------------------------------
   .lesser-fade の付いた要素は、最初は透明で 50px 下にずれている。
   画面に入ると effects.js が .is-inview を付け、2秒かけて浮かび上がる。
   ・<html> に .lesser-js が付いている（＝ JavaScript が動いている）ときだけ隠す
   ・「動きを減らす」設定の人には最初から表示 */
.lesser-js .lesser-fade {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 2s, transform 2s;
}

.lesser-js .lesser-fade.is-inview {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.lesser-js .lesser-fade {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* 15. 全画面見出し（カバーブロック） --------------------------------------------
   カバーブロックのスタイルで「全画面見出し（固定背景）」を選ぶと、この見た目になる。
   （登録は inc/blocks.php）

   仕組み：
   ・ブロック自体を clip-path で「窓」にする
   ・中の写真は画面に固定（position: fixed）
   → スクロールすると、窓の中の写真は動かず、窓だけが流れていく。
     旧テーマの .haikeibox と同じ見え方を、写真の差し替えがエディタでできる形にしたもの。 */
.wp-block-cover.is-style-lesser-banner {
	min-height: 100vh !important; /* エディタで高さを入れていても画面いっぱいにする */
	min-height: 100svh !important;
	padding: 0 var(--lesser-gutter);
	clip-path: inset(0);
}

.is-style-lesser-banner > .wp-block-cover__image-background,
.is-style-lesser-banner > .wp-block-cover__video-background {
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
}

.is-style-lesser-banner .wp-block-cover__inner-container {
	width: 100%;
	color: #fff;
}

/* 写真の上の文字 */
.is-style-lesser-banner .wp-block-cover__inner-container :is(h1, h2, h3, p) {
	margin: 0;
	color: #fff;
	font-family: var(--lesser-font-head);
	font-size: 30px;      /* 以前は 60px。大きすぎて重たく見えたので半分に */
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.2em;
	/* 字間を空けると最後の文字の後ろにも余白ができて左に寄って見えるので、
	   同じ分だけ左に余白を足して真ん中に見えるようにする */
	padding-left: 0.2em;
	text-align: center;
	text-transform: uppercase;
}

@media (max-width: 768px) {
	.is-style-lesser-banner .wp-block-cover__inner-container :is(h1, h2, h3, p) {
		font-size: 20px;
	}
}


/* 16. ブロックの調整 ---------------------------------------------------------- */

/* 「全幅」にしたブロックは、本文の幅（1200px）を飛び出して画面の端から端まで広げる */
.entry__content .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}

/* YouTube などの埋め込み動画は 16:9 で横幅いっぱいに。
   ブロックの「埋め込み」でも、カスタム HTML に貼った iframe でも同じ見え方になる。 */
.wp-block-embed.is-type-video iframe,
.wp-block-embed__wrapper iframe,
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"],
iframe[src*="player.vimeo.com"] {
	display: block;
	position: static !important; /* WordPress 標準の「枠に重ねて配置」をやめ、普通に縦に並べる */
	width: 100%;
	height: auto !important;
	aspect-ratio: 16 / 9;
}

/* 旧テーマで YouTube を包んでいた枠の余白（16:9 用の上余白）を打ち消す。
   ※ これを消したうえで iframe を「重ねて配置」のままにすると、枠の高さが 0 になり
     下の文章が動画の上に重なる（v0.5.0 までの不具合）。上の position: static とセットで使う。 */
.wp-block-embed__wrapper {
	padding-top: 0 !important;
}

.wp-block-embed__wrapper::before {
	display: none !important;
}

/* トップページ本文の見出し（例：NEWS）は、参考サイトのセクション見出しと同じ見た目 */
.entry__content--front > h2,
.entry__content--front > .wp-block-heading:is(h2) {
	margin: 0 0 25px;
	font-family: var(--lesser-font-head);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.6em;
	text-transform: uppercase;
}

/* 「最新の投稿」ブロック（グリッド表示）を、参考サイトの NEWS カードと同じ見た目にする
   ・3列（スマホは1列）
   ・画像は 16:10 に自動で切り抜き（大きな写真をそのまま入れても揃う）
   ・タイトルは画像の下端に黒帯で重ねる */
.wp-block-latest-posts.is-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-latest-posts.is-grid > li {
	display: grid;
	grid-template-columns: 100%;
	align-content: start;
	width: auto !important;
	margin: 0 !important;
}

/* 画像 */
.wp-block-latest-posts.is-grid .wp-block-latest-posts__featured-image {
	margin: 0;
}

/* 画像を包むリンクを箱にして、画像の下にできる数 px のすき間をなくす */
.wp-block-latest-posts.is-grid .wp-block-latest-posts__featured-image a {
	display: block;
}

.wp-block-latest-posts.is-grid .wp-block-latest-posts__featured-image img {
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* 並び順：画像 → 日付 → タイトル（HTML の順番は 画像・タイトル・日付 なので、表示位置で並べ替える） */
.wp-block-latest-posts.is-grid .wp-block-latest-posts__featured-image { grid-row: 1; }
.wp-block-latest-posts.is-grid .wp-block-latest-posts__post-date     { grid-row: 2; }
.wp-block-latest-posts.is-grid .wp-block-latest-posts__post-title    { grid-row: 3; }
.wp-block-latest-posts.is-grid .wp-block-latest-posts__post-excerpt  { grid-row: 4; }

/* タイトル：画像の下に黒文字。2行まで表示して、あふれた分は省略 */
.wp-block-latest-posts.is-grid .wp-block-latest-posts__post-title {
	display: -webkit-box;
	overflow: hidden;
	color: var(--lesser-text) !important;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	pointer-events: auto !important; /* 旧テーマで無効にしていたクリックを戻す */
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* 本文の抜粋（2行目）：3行まで表示して、あふれた分は省略 */
.wp-block-latest-posts.is-grid .wp-block-latest-posts__post-excerpt {
	display: -webkit-box;
	overflow: hidden;
	margin: 5px 0 0;
	font-size: 14px;
	line-height: 1.5;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* 本文内リンクの下線（10. 本文）を、カード内では消す */
.entry__content .wp-block-latest-posts a {
	text-decoration: none;
}

/* 「続きを読む」リンクは非表示（画像とタイトルがリンクになっているため） */
.wp-block-latest-posts.is-grid .wp-block-latest-posts__read-more {
	display: none;
}

/* 日付（ブロックの設定で「投稿日を表示」をオンにしたとき）：画像のすぐ下に小さく */
.wp-block-latest-posts.is-grid .wp-block-latest-posts__post-date {
	margin: 12px 0 4px;
	color: var(--lesser-muted);
	font-family: var(--lesser-font-head);
	font-size: 11px;
	letter-spacing: 0.1em;
}

@media (max-width: 768px) {
	.wp-block-latest-posts.is-grid {
		grid-template-columns: 100%;
		gap: 20px;
	}
}


/* 17. NEWS カード ------------------------------------------------------------- */
.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 24px;
}

.news-card__link {
	display: block;
}

.news-card__thumb {
	position: relative;
	margin: 0;
}

.news-card__img,
.news-card__noimage {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover; /* 縦横比が違う画像も、真ん中を切り抜いて 16:10 にそろえる */
	background: var(--lesser-line);
}

/* 日付：画像のすぐ下に小さく */
.news-card__date {
	margin: 12px 0 4px;
	color: var(--lesser-muted);
	font-family: var(--lesser-font-head);
	font-size: 11px;
	letter-spacing: 0.1em;
}

/* タイトル：2行まで表示して、あふれた分は「…」 */
.news-card__title {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

@media (max-width: 768px) {
	.news-grid {
		grid-template-columns: 100%;
		gap: 20px;
	}
}


/* 18. NEWS 記事ページ -------------------------------------------------------- */
.site-main--single {
	padding: 0;
}

/* 記事本体：幅 768px で中央 */
.single-news {
	max-width: calc(var(--lesser-narrow) + var(--lesser-gutter) * 2);
	margin: 0 auto;
	padding: 60px var(--lesser-gutter) 0;
}

/* タイトル：中央・やや大きめ・字間広め・下に細い線 */
.single-news__title {
	margin: 0 0 10px;
	padding: 0 0 5px;
	border-bottom: 1px solid var(--lesser-line);
	font-family: var(--lesser-font-body);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.2em;
	text-align: center;
}

/* 日付：右寄せの小さなグレー */
.single-news__date {
	margin: 0 0 20px;
	color: var(--lesser-muted);
	font-size: 10px;
	text-align: right;
}

/* フライヤー（アイキャッチ画像）：左寄せ、最大 300px */
.single-news__flyer {
	max-width: 300px;
	margin: 0 0 15px;
}

.single-news__flyer img {
	display: block;
	width: 100%;
	height: auto;
}

/* 本文：行間ゆったり、段落の間は 15px */
.single-news__content {
	line-height: 1.8;
}

.single-news__content > * {
	margin-bottom: 15px;
}

/* 前後の記事へのリンク */
.single-news__nav {
	max-width: calc(var(--lesser-narrow) + var(--lesser-gutter) * 2);
	margin: 0 auto;
	padding: 30px var(--lesser-gutter);
}

.single-news__nav .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	font-size: 12px;
}

.single-news__nav .nav-next {
	margin-left: auto;
	text-align: right;
}

/* RECENT POSTS */
.recent-posts {
	padding: 50px 0 100px;
}

.recent-posts__title {
	margin-bottom: 10px;
}

@media (max-width: 768px) {
	.single-news {
		padding-top: 40px;
	}

	.single-news__title {
		font-size: 16px;
		letter-spacing: 0.1em;
	}

	.single-news__flyer {
		max-width: 100%;
	}
}


/* 見出し文字の登場（全画面見出し・下層ページの見出し）
   ぼやけた状態から、ピントが合うようにくっきり現れる（少し大きい状態から元の大きさへ）。
   .lesser-reveal は effects.js が画面に入ったとき .is-inview を付ける箱。 */
.lesser-js .lesser-reveal :is(.page-hero__title, h1, h2, h3, p) {
	opacity: 0;
	filter: blur(12px);
	transform: scale(1.08);
	transition:
		opacity 1.6s ease,
		filter 1.6s ease,
		transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lesser-js .lesser-reveal.is-inview :is(.page-hero__title, h1, h2, h3, p) {
	opacity: 1;
	filter: none;
	transform: none;
}

/* 下層ページの見出しの文字を、画面の中央に置く箱 */
.page-hero__heading {
	position: relative;
	z-index: 1;
}


/* 19. NEWS 一覧ページ --------------------------------------------------------- */
.site-main--news-list {
	padding: 0;
}

.news-list {
	padding: 50px 0 100px;
}

/* 一覧は縦の間隔を少し広めに */
.news-grid--list {
	row-gap: 50px;
}

/* 紹介文：3行まで表示して、あふれた分は省略 */
.news-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	margin: 6px 0 0;
	color: var(--lesser-sub);
	font-size: 14px;
	line-height: 1.5;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* ページ番号：小さな四角い枠。今のページは黒地に白文字 */
.news-pagination {
	padding: 50px 0 0;
	text-align: center;
}

.news-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
}

.news-pagination .page-numbers {
	display: inline-block;
	min-width: 22px;
	padding: 3px 5px;
	border: 1px solid var(--lesser-text);
	font-family: var(--lesser-font-body);
	font-size: 10px;
	line-height: 1.4;
	text-align: center;
}

.news-pagination .page-numbers.current {
	background: var(--lesser-text);
	color: #fff;
}

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


/* 18. NEWS 記事ページ（追加）：本文の写真・動画の大きさ ---------------------------
   記事にはフライヤー（縦長）・正方形の写真・横長の写真・YouTube などいろいろ入るため、
   「大きくなりすぎない」ように形ごとに上限を決める。
     写真  … 縦 400px・横 100% の枠に収める（縦長 → 約 280×400 ／ 正方形 → 400×400 ／ 横長 → 幅いっぱい）
     動画  … 横幅いっぱい（最大 768px）の 16:9
   写真はクリックすると拡大表示（theme.json で WordPress 標準の拡大表示を有効化）。 */
.single-news__content img:not(.emoji):not(.wp-smiley) {
	width: auto !important;  /* エディタで指定したサイズより、この上限を優先 */
	max-width: 100%;
	height: auto !important;
	max-height: 400px;
	object-fit: contain;
	object-position: left top;
	align-self: flex-start; /* 拡大表示用の枠（横並びの箱）の中で横に引き伸ばされないように */
}

/* 写真は左寄せ（中央寄せや右寄せの指定は無視して、参考サイトと同じ左に） */
.single-news__content .wp-block-image,
.single-news__content figure.aligncenter,
.single-news__content .aligncenter {
	margin-right: 0;
	margin-left: 0;
	text-align: left;
}

.single-news__content .wp-block-image img {
	margin: 0;
}

/* YouTube などの埋め込み動画は、記事の中では一回り小さく（最大 560px） */
.single-news__content .wp-block-embed,
.single-news__content iframe {
	max-width: 560px;
}

/* 動画（ブロックの「動画」）も枠に収める */
.single-news__content video {
	width: 100%;
	max-width: 560px;
	max-height: 315px;
	background: #000;
}

/* 文字はすべて左揃え（中央揃えで書かれた記事も、参考サイトと同じ左揃えで表示） */
.single-news__content :is(p, h1, h2, h3, h4, h5, h6, li, figcaption, .wp-block-heading) {
	text-align: left !important;
}

/* 横並び（カラム）は縦 1列に並べ直す */
.single-news__content .wp-block-columns {
	display: block;
}

.single-news__content .wp-block-column {
	margin-bottom: 15px;
}


/* 20. 追加のアニメーション ---------------------------------------------------- */

/* A. 画像にマウスを乗せると、ゆっくりズーム
      （NEWS カード・最新の投稿ブロック・「zoomin」クラスを付けた画像ブロック） */
.news-card__thumb,
.wp-block-latest-posts__featured-image,
.wp-block-image.zoomin {
	overflow: hidden;
}

.news-card__img,
.wp-block-latest-posts__featured-image img,
.wp-block-image.zoomin img {
	transition: transform 0.8s ease, opacity 0.3s;
}

.news-card__link:hover .news-card__img,
.wp-block-latest-posts__featured-image a:hover img,
.wp-block-image.zoomin:hover img {
	transform: scale(1.06);
}

/* カード全体が薄くならないよう、カード内のリンクは透明度を変えない */
.news-card__link:hover,
.wp-block-latest-posts__featured-image a:hover {
	opacity: 1;
}

/* B. SNS アイコンにマウスを乗せると、くるっと横に1回転 */
.social-links .icon {
	transition: transform 0.6s ease;
}

.social-links a:hover {
	opacity: 1;
}

.social-links a:hover .icon {
	transform: rotateY(360deg);
}

/* F. ドロワーを開くと、メニュー項目が上から順に現れる
      （--i は effects.js が付ける順番の番号。1つごとに 0.06 秒ずつ遅らせる） */
.menu-list--drawer > li,
.drawer__social {
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 0.4s, transform 0.4s;
}

.is-drawer-open .menu-list--drawer > li,
.is-drawer-open .drawer__social {
	opacity: 1;
	transform: none;
	transition-delay: calc(0.25s + var(--i, 0) * 0.06s);
}

/* G. ページ切り替え：開いたときにふわっと現れ、リンクを押すと白く消える */
body {
	animation: lesser-page-in 0.8s ease both;
}

/* 消えるときは別のアニメーションに切り替える
   （ふわっと現れるアニメーションが「不透明」を保ち続けるため、透明度の指定だけでは消えない） */
body.is-leaving {
	animation: lesser-page-out 0.4s ease forwards;
}

@keyframes lesser-page-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes lesser-page-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

/* 「動きを減らす」設定の人には、追加のアニメーションをすべて行わない */
@media (prefers-reduced-motion: reduce) {
	body {
		animation: none;
	}

	.news-card__img,
	.wp-block-latest-posts__featured-image img,
	.wp-block-image.zoomin img,
	.social-links .icon,
	.menu-list--drawer > li,
	.drawer__social {
		transition: none;
	}

	.lesser-js .lesser-reveal :is(.page-hero__title, h1, h2, h3, p) {
		opacity: 1;
		filter: none;
		transform: none;
		transition: none;
	}
}


/* 21. 絵文字 ------------------------------------------------------------------
   WordPress は本文中の絵文字（🎫 など）を小さな画像に置き換えて表示する。
   写真用の大きさ指定が当たらないよう、文字と同じ大きさに固定する。 */
img.emoji,
img.wp-smiley {
	display: inline !important;
	width: 1em !important;
	height: 1em !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 0.07em !important;
	padding: 0 !important;
	border: none !important;
	vertical-align: -0.1em !important;
	box-shadow: none !important;
}


/* 22. メンバー表記 ------------------------------------------------------------
   ABOUT のメンバー名（各自の X へのリンク）。本文リンクの下線を付けない。 */
.entry__content .memberlink a {
	text-decoration: none;
}

/* ショートコード [lesser_members]（付属プラグイン Lesser Core）のメンバー表記
   PC   ：映画のクレジットのように横一列。パート（小さなグレー）→ 名前 → SNS アイコン。間に細い縦線
   スマホ：1人 1行。左にパート、中央に名前、右にアイコン */
.lesser-members {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.lesser-member {
	display: flex;
	flex: 0 0 180px;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 10px 16px 6px;
	text-align: center;
}

.lesser-member + .lesser-member {
	border-left: 1px solid var(--lesser-line);
}

.lesser-member__part {
	color: var(--lesser-muted);
	font-family: var(--lesser-font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	padding-left: 0.3em; /* 字間の分だけ左にも足して中央に見せる */
}

.lesser-member__name {
	padding-left: 0.12em; /* 字間の分だけ左にも足して中央に見せる */
	font-family: var(--lesser-font-head);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* サポートメンバーの小さな札 */
.lesser-member__support {
	display: block;
	width: fit-content;
	margin: 6px auto 0;
	padding: 2px 6px 1px;
	border: 1px solid var(--lesser-muted);
	color: var(--lesser-muted);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.2em;
}

.lesser-member__links {
	display: flex;
	gap: 4px;
	margin-top: auto; /* SUPPORT の札があってもなくても、アイコンの高さをそろえる */
	padding-top: 4px;
}

.lesser-member__link,
.entry__content .lesser-member__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: var(--lesser-text);
	text-decoration: none;
}

.lesser-member__link .icon {
	width: 15px;
	height: 15px;
	fill: currentColor;
	transition: transform 0.6s ease;
}

.lesser-member__link:hover {
	opacity: 1;
}

/* 上の SNS アイコンと同じく、マウスを乗せるとくるっと回る */
.lesser-member__link:hover .icon {
	transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.lesser-member__link:hover .icon {
		transform: none;
	}
}

@media (max-width: 768px) {

	.lesser-members {
		flex-direction: column;
		max-width: 420px;
		border-top: 1px solid var(--lesser-line);
	}

	.lesser-member {
		display: grid;
		flex: none;
		grid-template-columns: 76px 1fr auto;
		align-items: center;
		gap: 10px;
		padding: 14px 0;
		border-bottom: 1px solid var(--lesser-line);
		text-align: left;
	}

	.lesser-member + .lesser-member {
		border-left: 0;
	}

	.lesser-member__part {
		padding-left: 0;
		font-size: 10px;
	}

	.lesser-member__name {
		padding-left: 0;
		font-size: 18px;
	}

	.lesser-member__support {
		display: inline-block;
		margin: 0 0 0 6px;
		vertical-align: 3px;
	}

	.lesser-member__links {
		margin-top: 0;
	}
}


/* 23. お問い合わせフォーム（Contact Form 7） ------------------------------------
   参考サイトと同じく、幅 680px で中央に置き、入力欄は横幅いっぱい。
   項目名は小さめの大文字・字間広め。送信ボタンは枠線のボタン。 */
.wpcf7 {
	max-width: 680px;
	margin: 0 auto;
}

.wpcf7 form > p {
	margin: 0 0 25px;
}

/* 項目名（NAME / MAIL など） */
.wpcf7 label {
	display: block;
	font-size: 14px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* 入力欄 */
.wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea) {
	display: block;
	width: 100% !important; /* 旧テーマで個別に決めていた幅より優先 */
	margin-top: 5px;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 0;
	background: #fff;
	color: var(--lesser-text);
	font: inherit;
	font-size: 16px; /* 16px 未満だと iPhone で入力時に画面が拡大されてしまう */
	letter-spacing: normal;
	text-transform: none;
}

.wpcf7 textarea {
	height: 200px;
	resize: vertical;
}

.wpcf7 :is(input, select, textarea):focus {
	border-color: var(--lesser-text);
	outline: none;
}

/* 送信ボタン */
.wpcf7 input[type="submit"] {
	display: block;
	min-width: 200px;
	margin: 10px auto 0;
	padding: 0 25px;
	border: 2px solid var(--lesser-text);
	border-radius: 0;
	background: none;
	color: var(--lesser-text);
	font-family: var(--lesser-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 45px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.3s, color 0.3s;
}

.wpcf7 input[type="submit"]:hover {
	color: #fff; /* 黒が満ちる動きは 31 章 I */
}

.wpcf7 .wpcf7-spinner {
	display: block;
	margin: 10px auto 0;
}

.wpcf7 .wpcf7-not-valid-tip,
.wpcf7 .wpcf7-response-output {
	font-size: 12px;
}

/* ── フォームの部品（Lesser Theme の書き方。CF7 のフォーム欄に下のクラスで書く） ──
   <div class="lesser-form__row">   … 1項目分の枠
   <span class="lesser-form__label">NAME<small>お名前</small></span>  … 英語の項目名＋日本語の補足
   <span class="lesser-form__req">必須</span> / <span class="lesser-form__opt">任意</span>
   <span class="lesser-form__note">補足説明</span>
   <div class="lesser-form__cols">  … PC で 2つ横並び（スマホは縦） */
.lesser-form__intro {
	margin: 0 0 40px;
	color: var(--lesser-sub);
	font-size: 13px;
	line-height: 1.9;
}

.lesser-form__row {
	margin: 0 0 28px;
}

/* Contact Form 7 が自動で足す段落（<p>）の余白を消す */
.wpcf7 .lesser-form__row > p,
.wpcf7 .lesser-form__cols > p:empty {
	margin: 0;
}

.lesser-form__label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin-bottom: 8px;
	font-family: var(--lesser-font-head);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.lesser-form__label small {
	color: var(--lesser-sub);
	font-family: var(--lesser-font-body);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.05em;
}

.lesser-form__req,
.lesser-form__opt {
	padding: 2px 6px 1px;
	font-family: var(--lesser-font-body);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.1em;
}

.lesser-form__req {
	background: var(--lesser-text);
	color: var(--lesser-bg);
}

.lesser-form__opt {
	border: 1px solid #ccc;
	color: var(--lesser-muted);
}

.lesser-form__note {
	display: block;
	margin-top: 6px;
	color: var(--lesser-muted);
	font-size: 11px;
	line-height: 1.7;
	letter-spacing: 0.03em;
	text-transform: none;
}

.lesser-form__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 20px;
}

@media (max-width: 600px) {
	.lesser-form__cols {
		grid-template-columns: 1fr;
	}
}

/* 入力欄の中の薄い例文 */
.wpcf7 ::placeholder {
	color: #bbb;
	opacity: 1;
}

/* 選択欄（▼ を自前で描く） */
.wpcf7 select {
	padding-right: 36px;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
	cursor: pointer;
}

/* ラジオボタン・チェックボックス（お問い合わせの種類など）：四角いボタンを並べた形 */
.wpcf7 .wpcf7-radio,
.wpcf7 .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wpcf7 .wpcf7-radio .wpcf7-list-item,
.wpcf7 .wpcf7-checkbox .wpcf7-list-item {
	margin: 0;
}

.wpcf7 .wpcf7-radio label,
.wpcf7 .wpcf7-checkbox label {
	position: relative;
	display: block;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: none;
	cursor: pointer;
}

.wpcf7 .wpcf7-radio input,
.wpcf7 .wpcf7-checkbox input {
	position: absolute;
	opacity: 0;
}

.wpcf7 .wpcf7-radio .wpcf7-list-item-label,
.wpcf7 .wpcf7-checkbox .wpcf7-list-item-label {
	display: block;
	padding: 9px 14px;
	border: 1px solid #ccc;
	background: #fff;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.wpcf7 .wpcf7-radio label:hover .wpcf7-list-item-label,
.wpcf7 .wpcf7-checkbox label:hover .wpcf7-list-item-label {
	border-color: var(--lesser-text);
}

.wpcf7 .wpcf7-radio input:checked + .wpcf7-list-item-label,
.wpcf7 .wpcf7-checkbox input:checked + .wpcf7-list-item-label {
	border-color: var(--lesser-text);
	background: var(--lesser-text);
	color: #fff;
}

.wpcf7 .wpcf7-radio input:focus-visible + .wpcf7-list-item-label,
.wpcf7 .wpcf7-checkbox input:focus-visible + .wpcf7-list-item-label {
	outline: 2px solid var(--lesser-text);
	outline-offset: 2px;
}

/* PC（601px 以上）では選択ボタンを横 1列に収め、幅を均等に割り振る（スマホは折り返し） */
@media (min-width: 601px) {
	.wpcf7 .wpcf7-radio {
		flex-wrap: nowrap;
		gap: 6px;
	}

	.wpcf7 .wpcf7-radio .wpcf7-list-item {
		flex: 1 1 auto;
	}

	.wpcf7 .wpcf7-radio .wpcf7-list-item-label {
		padding: 9px 6px;
		text-align: center;
		white-space: nowrap;
	}
}

/* 同意のチェック（個人情報の取り扱い）：こちらは普通のチェックボックス */
.wpcf7 .wpcf7-acceptance {
	display: block;
	text-align: center;
}

.wpcf7 .wpcf7-acceptance label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: none;
	cursor: pointer;
}

.wpcf7 .wpcf7-acceptance input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--lesser-text);
}

.lesser-form__privacy p {
	margin: 0;
}

.lesser-form__privacy {
	margin: 40px 0 20px;
	padding: 20px;
	background: #fafafa;
	color: var(--lesser-sub);
	font-size: 11px;
	line-height: 1.8;
}

/* 同意にチェックするまで送信ボタンは薄く（押せない） */
.wpcf7 input[type="submit"]:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.wpcf7 input[type="submit"]:disabled:hover {
	background: none;
	color: var(--lesser-text);
}

/* 入力ミスの欄は赤い枠に */
.wpcf7 .wpcf7-not-valid {
	border-color: #c0392b !important;
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: #c0392b;
}

/* 送信後のメッセージ（成功・エラー） */
.wpcf7 form .wpcf7-response-output {
	margin: 30px 0 0;
	padding: 14px 18px;
	border: 1px solid var(--lesser-line);
	font-size: 13px;
	line-height: 1.8;
	text-align: center;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--lesser-text);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	border-color: #c0392b;
	color: #c0392b;
}


/* 24. 小さめの枠線ボタン（LISTEN NOW など） -------------------------------------
   本文で「ボタン」ブロックのスタイルを「輪郭」にしたもの。
   ジャケット写真の下に置いても主張しすぎないよう、小さく・細めの枠線にする。
   （WordPress 標準の余白指定より優先させるため、少し長い指定にしている） */
.entry__content .wp-block-button.is-style-outline > .wp-block-button__link {
	/* Roboto Condensed の大文字は、行の中で少し上に寄って見えるため、
	   上の余白を 3px 足して行の高さを 3px 減らし、文字を下にずらして真ん中に見せる（高さは 32px のまま） */
	padding: 3px 18px 0;
	border-width: 1px;
	font-family: var(--lesser-font-head);
	font-size: 11px;
	line-height: 29px;
	letter-spacing: 0.2em;
	text-decoration: none; /* 本文リンクの下線を付けない */
	transition: background-size 0.5s var(--lesser-ease), color 0.4s;
}

/* 縦に並べたとき（LISTEN NOW と DISCOGRAPHY など）にボタンの幅をそろえる */
.entry__content .wp-block-button.is-style-outline > .wp-block-button__link {
	min-width: 140px;
	text-align: center;
}

/* マウスを乗せると黒地に白文字（左から黒が満ちる。31 章 I） */
.entry__content .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-size: 100% 100%;
	color: #fff;
	opacity: 1;
}


/* 25. フィルムのざらつき -------------------------------------------------------
   画面全体に、ごく薄いノイズ（フィルム写真のような粒子感）を重ねる。
   ・ノイズの画像は SVG で作っている（画像ファイル不要・とても軽い）
   ・粒子が 1 秒間に 8 回ほど位置を変え、フィルムが回っているように見せる
   ・クリックやスクロールの邪魔はしない（pointer-events: none）
   ・「外観 → カスタマイズ → 演出」でオフにできる（body に .has-grain が付いているときだけ表示） */
.has-grain::after {
	content: "";
	position: fixed;
	inset: -50%;               /* 動かしても端が切れないよう、画面より大きくしておく */
	z-index: 9999;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: var(--lesser-grain-opacity, 0.045); /* 濃さ。数字を大きくすると粒子が強くなる */
	animation: lesser-grain 1s steps(8) infinite;
}

@keyframes lesser-grain {
	0%   { transform: translate(0, 0); }
	12%  { transform: translate(-5%, -8%); }
	25%  { transform: translate(-12%, 4%); }
	37%  { transform: translate(6%, -14%); }
	50%  { transform: translate(-4%, 12%); }
	62%  { transform: translate(10%, 2%); }
	75%  { transform: translate(-14%, -4%); }
	87%  { transform: translate(4%, 10%); }
	100% { transform: translate(0, 0); }
}

/* 「動きを減らす」設定の人には、粒子は出したまま動かさない */
@media (prefers-reduced-motion: reduce) {
	.has-grain::after {
		animation: none;
	}
}


/* 26. MERCH（商品画像をそろえる） ---------------------------------------------
   トップの MERCH の「カラム」ブロックに、追加 CSS クラス「lesser-merch」を付けると、
   ・商品画像はすべて正方形（1:1）にそろう（縦長・横長の写真も中央で切り抜き）
   ・アップロード時の大きさや、エディタで指定した幅に関係なく、同じ大きさで並ぶ
   ・商品名・価格は画像の下に中央揃え
   （アップロード時には 800×800 の正方形の画像も自動で作られる：inc/setup.php） */
.lesser-merch .wp-block-image {
	margin: 0 0 12px;
	overflow: hidden;
}

.lesser-merch .wp-block-image img {
	display: block;
	width: 100% !important;    /* エディタで指定した幅（274px など）より優先 */
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.8s ease;
}

.lesser-merch .wp-block-image:hover img {
	transform: scale(1.06);
}

.lesser-merch p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	text-align: center;
}


/* 27. MERCH カード・一覧・商品ページ（Lesser Core） -------------------------- */

/* カードの並び：PC は 3列、スマホは 2列 */
.merch-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 24px;
}

.merch-card__link {
	display: block;
}

.merch-card__link:hover {
	opacity: 1;
}

/* 写真：正方形。裏面の写真は同じ位置に重ねておき、マウスを乗せると表示
   背景は付けない（背景が透明な PNG の商品写真は、透明のままページの白に乗る） */
.merch-card__thumb {
	position: relative;
	margin: 0 0 12px;
	overflow: hidden;
}

/* 写真が未設定のときだけ、薄いグレーの四角を出す */
.merch-card__noimage {
	background: var(--lesser-line);
}

.merch-card__img,
.merch-card__noimage {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.8s ease, opacity 0.5s ease;
}

.merch-card__img--back {
	position: absolute;
	inset: 0;
	opacity: 0;
}

/* 透明な PNG だと表が裏から透けて見えるので、裏を出すときは表を消す */
.merch-card--has-back .merch-card__link:hover .merch-card__img:not(.merch-card__img--back) {
	opacity: 0;
}

.merch-card--has-back .merch-card__link:hover .merch-card__img--back {
	opacity: 1;
}

.merch-card:not(.merch-card--has-back) .merch-card__link:hover .merch-card__img {
	transform: scale(1.06);
}

/* 状態のラベル（左上） */
.merch-card__label {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	padding: 2px 8px;
	background: var(--lesser-text);
	color: #fff;
	font-family: var(--lesser-font-head);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.15em;
}

/* SOLD OUT：写真を薄く */
.merch-card--soldout .merch-card__img {
	opacity: 0.4;
}

/* COMING SOON：写真をぼかす */
.merch-card--coming .merch-card__img {
	filter: blur(10px);
	transform: scale(1.1);
}

.merch-card__title {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
	text-align: center;
}

.merch-card__price {
	margin: 2px 0 0;
	color: var(--lesser-sub);
	font-family: var(--lesser-font-head);
	font-size: 12px;
	letter-spacing: 0.05em;
	text-align: center;
}

/* MERCH 一覧ページ */
.site-main--merch-list,
.site-main--merch-single {
	padding: 0;
}

.merch-list {
	padding: 50px 0 100px;
}

/* 種類で絞り込むボタン */
.merch-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	margin-bottom: 40px;
}

.merch-filter__item {
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	color: var(--lesser-muted);
	font-family: var(--lesser-font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.merch-filter__item.is-current,
.merch-filter__item:hover {
	border-bottom-color: currentColor;
	color: var(--lesser-text);
	opacity: 1;
}

/* 商品ページ：左に写真、右に商品情報 */
.merch-single {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
	padding-top: 60px;
	padding-bottom: 100px;
}

.merch-single__main {
	position: relative;
	margin: 0;
}

.merch-single__img {
	display: none;
	width: 100%;
	height: auto;
}

.merch-single__img.is-active,
.merch-single__main .merch-single__img:only-child {
	display: block;
}

.merch-single__thumbs {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.merch-single__thumb {
	width: 72px;
	padding: 0;
	border: 1px solid transparent;
	background: none;
	cursor: pointer;
	opacity: 0.5;
}

.merch-single__thumb.is-active {
	border-color: var(--lesser-text);
	opacity: 1;
}

.merch-single__thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.merch-single__title {
	margin: 0 0 8px;
	font-family: var(--lesser-font-body);
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.1em;
}

.merch-single__price {
	margin: 0 0 12px;
	font-family: var(--lesser-font-head);
	font-size: 16px;
	letter-spacing: 0.05em;
}

.merch-single__label {
	display: inline-block;
	margin: 0 0 20px;
	padding: 2px 8px;
	background: var(--lesser-text);
	color: #fff;
	font-family: var(--lesser-font-head);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.15em;
}

.merch-single__content {
	color: var(--lesser-sub);
	font-size: 13px;
	line-height: 1.8;
}

.merch-single__buy {
	margin-top: 20px;
}

.merch-single__back {
	grid-column: 1 / -1;
	margin: 0;
	text-align: right;
}

@media (max-width: 768px) {
	.merch-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px 15px;
	}

	.merch-single {
		grid-template-columns: 100%;
		gap: 30px;
		padding-top: 40px;
	}
}


/* 28. 細かな調整 --------------------------------------------------------------- */

/* 注意書き（例：※本商品は会場限定販売となっております。）
   段落ブロックに追加 CSS クラス「lesser-note」を付けると、小さめのグレーで控えめに表示 */
.entry__content .lesser-note {
	color: var(--lesser-muted);
	font-size: 12px !important;
	font-weight: 400;
}

/* トップページ本文の小見出し（ABOUT のバンド名など）は太字にしない */
.entry__content--front > h3 {
	font-weight: 400;
}

/* 横並びボタンを、上の写真（ジャケットなど）と同じ幅にそろえる
   「ボタン」ブロックに追加 CSS クラス「lesser-buttons-fit」を付けると、
   ボタンが横一列に並び、合計の幅が親の幅（＝上の写真の幅）いっぱいになる */
.entry__content .lesser-buttons-fit {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	width: 100%;
}

.entry__content .lesser-buttons-fit .wp-block-button {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

.entry__content .lesser-buttons-fit .wp-block-button.is-style-outline > .wp-block-button__link {
	width: 100%;
	min-width: 0;
	padding-right: 4px;
	padding-left: 4px;
	font-size: 10px;
	letter-spacing: 0.12em;
	white-space: nowrap;
}

/* 見出しなしで「VIEW ALL >」だけを右に置くとき（MERCH など、上に全画面見出しがある場所） */
.section-head.section-head--end {
	justify-content: flex-end;
}

/* 本文の中（トップページなど）に MERCH カードを置いたときも、
   本文用の見出し・リンクの指定（字間・下線・上の余白）が当たらないようにする */
.entry__content .merch-card a {
	text-decoration: none;
}

.entry__content .merch-card__title {
	margin: 0;
	font-family: var(--lesser-font-body);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: normal;
}


/* 29. SHOWS の表・一覧ページ（Lesser Core） ---------------------------------
   トップのショートコード [lesser_shows] と /shows/ で同じ表を使う。
   これからのライブは濃い文字、終わったライブはグレーで、ひと目で区別できるようにする。 */

.shows-table {
	width: 100%;
	border-collapse: collapse;
}

.shows-table th,
.shows-table td {
	padding: 15px 10px;
	border-bottom: 1px solid var(--lesser-line);
	text-align: left;
	vertical-align: top;
}

.shows-table th {
	font-family: var(--lesser-font-head);
	font-weight: 700;
	letter-spacing: 0.2em;
}

.shows-table tbody td {
	transition: background 0.3s;
}

.shows-table tbody tr:hover td {
	background: #fafafa;
}

/* 列の幅を固定（UPCOMING と PAST の 2つの表で縦の線がそろうように） */
.shows-table th:nth-child(1) { width: 18%; }
.shows-table th:nth-child(3) { width: 22%; }
.shows-table th:nth-child(4) { width: 14%; }

.shows-row__date {
	white-space: nowrap;
	font-family: var(--lesser-font-head);
	letter-spacing: 0.05em;
}

/* 終わったライブはグレー */
.shows-row--past td {
	color: var(--lesser-muted);
}

/* 中止は取り消し線 */
.shows-row--canceled .shows-row__name {
	text-decoration: line-through;
}

/* SOLD OUT / CANCELED のラベル（MERCH のラベルと同じ黒い小さな札） */
.shows-row__label {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 6px 2px;
	background: var(--lesser-text);
	color: var(--lesser-bg);
	font-family: var(--lesser-font-head);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	vertical-align: 2px;
}

/* TICKET：細い枠線の小さなボタン */
.shows-row__ticket,
.entry__content .shows-row__ticket {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 8px 2px;
	border: 1px solid currentColor;
	font-family: var(--lesser-font-head);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.15em;
	text-decoration: none;
	vertical-align: 2px;
	transition: background 0.3s, color 0.3s;
}

.shows-row__ticket:hover {
	opacity: 1;
	color: var(--lesser-bg); /* 黒が満ちる動きは 31 章 I */
}

/* 一覧ページ（/shows/） */
.site-main--shows {
	padding: 0;
}

.shows-list {
	padding: 50px var(--lesser-gutter) 100px;
}

.shows-list__group + .shows-list__group {
	margin-top: 80px;
}

.shows-list .section-title {
	margin-bottom: 20px;
}

/* スマホ：1件ずつ「日付 → イベント名 → 会場・地域」の縦並びに */
@media (max-width: 768px) {

	.shows-table thead {
		display: none;
	}

	.shows-table tr {
		display: block;
		padding: 14px 0;
		border-bottom: 1px solid var(--lesser-line);
	}

	.shows-table td {
		display: inline;
		padding: 0;
		border: 0;
	}

	.shows-table tbody tr:hover td {
		background: none;
	}

	.shows-row__date {
		display: block !important;
		font-size: 12px;
	}

	.shows-row__title {
		display: block !important;
		margin: 2px 0;
		font-size: 15px;
	}

	.shows-row__venue,
	.shows-row__area {
		font-size: 12px;
		color: var(--lesser-sub);
	}

	.shows-row__venue + .shows-row__area::before {
		content: " / ";
	}

	.shows-row--past .shows-row__venue,
	.shows-row--past .shows-row__area {
		color: var(--lesser-muted);
	}
}


/* 30. コメント欄 -------------------------------------------------------------
   記事・固定ページで「コメントを許可」にしたときだけ表示される（comments.php） */
.comments {
	max-width: var(--lesser-narrow);
	margin: 0 auto;
	padding: 60px var(--lesser-gutter) 0;
}

.comments__title,
.comments__reply-title {
	margin: 0 0 20px;
}

.comments__list,
.comments__list .children {
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.comments__list .children {
	margin: 0 0 0 30px;
}

.comments__list .comment-body {
	padding: 20px 0;
	border-bottom: 1px solid var(--lesser-line);
}

.comments__list .comment-meta {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 10px;
	color: var(--lesser-muted);
	font-size: 12px;
}

.comments__list .avatar {
	border-radius: 50%;
}

.comment-form p {
	margin: 0 0 15px;
}

.comment-form label {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid var(--lesser-line);
	font: inherit;
}

.comment-form .comment-form-cookies-consent label {
	display: inline;
}


/* 31. UI アニメーション -------------------------------------------------------
   サイト全体の「動き」をまとめた章。動きのきっかけは assets/js/effects.js。
   どれも「動きを減らす」設定の人には行わない（章の最後でまとめて止める）。

   B. スクロールの進み具合を示す細い線（画面の一番上）
   C. ページの先頭へ戻るボタン（右下。1画面分スクロールすると現れる）
   D. スマホの追従バー：下へスクロール中は隠れ、上へ戻ると出てくる
   E. セクション見出し（NEWS・MORE NEWS など）：左から右へ、幕が開くように現れる
   （写真は他の部分と同じ「ふわっと表示」。トップ・下層の全画面の動画・写真には動きを付けない）
   G. 並んだもの（カード・メンバー・SHOWS の行）：順番に少しずつ現れる
   H. メニュー：マウスを乗せた項目以外が薄くなる
   I. ボタン：マウスを乗せると左から黒が満ちる
   J. 本文のリンク：下線が右へ流れて消え、左から引き直される
   K. カード：マウスを乗せると少し浮く
   L. 三本線ボタン：マウスを乗せると線の長さが変わる
   M. フォーム：入力中の項目名が少し右へ、選択ボタンは押し込む感触
   N. SHOWS の行：マウスを乗せるとイベント名が少し右へ */

/* 動きの速さ・曲線（ここを変えると全体のテンポが変わる） */
:root {
	--lesser-ease: cubic-bezier(0.22, 1, 0.36, 1);   /* すっと動いて、ゆっくり止まる */
	--lesser-ease-io: cubic-bezier(0.65, 0, 0.35, 1); /* ゆっくり始まり、ゆっくり終わる */
}

/* B. スクロールの進み具合（effects.js が --lesser-progress に 0〜1 を入れる） */
.lesser-progress {
	position: fixed;
	top: var(--lesser-admin-bar);
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 2px;
	background: var(--lesser-text);
	transform: scaleX(var(--lesser-progress, 0));
	transform-origin: left center;
	pointer-events: none;
}

/* スマホでは追従バーの下の線と重ならないよう、バーの下に置く */
@media (max-width: 768px) {
	.lesser-progress {
		height: 1px;
	}
}

/* C. 先頭へ戻るボタン */
.lesser-totop {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--lesser-text);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--lesser-text);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity 0.5s var(--lesser-ease), transform 0.5s var(--lesser-ease), visibility 0.5s, background 0.3s, color 0.3s;
}

.lesser-totop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.lesser-totop:hover {
	background: var(--lesser-text);
	color: var(--lesser-bg);
}

.lesser-totop .icon {
	width: 18px;
	height: 18px;
	fill: currentColor;
	transform: rotate(180deg); /* 下向き矢印を上向きに */
	transition: transform 0.4s var(--lesser-ease);
}

.lesser-totop:hover .icon {
	transform: rotate(180deg) translateY(3px);
}

@media (max-width: 768px) {
	.lesser-totop {
		right: 15px;
		bottom: 15px;
		width: 40px;
		height: 40px;
	}
}

/* D. スマホの追従バー：下へスクロール中は隠す */
@media (max-width: 768px) {
	.bar {
		transition: transform 0.45s var(--lesser-ease);
	}

	.is-bar-hidden:not(.is-drawer-open) .bar {
		transform: translateY(-100%);
	}
}

/* E. セクション見出し：幕が開くように現れる（effects.js が .lesser-wipe を付ける） */
.lesser-js .lesser-wipe {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1.2s var(--lesser-ease-io);
}

.lesser-js .lesser-wipe.is-inview {
	clip-path: inset(0 -1em 0 0); /* 字間の分だけ右に余裕を持たせて、最後の文字が欠けないように */
}

/* G. 順番に現れる：行やメンバーは、カードより小さく短い動きにする */
.lesser-js .lesser-rise {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.9s var(--lesser-ease), transform 0.9s var(--lesser-ease);
}

.lesser-js .lesser-rise.is-inview {
	opacity: 1;
	transform: none;
}

/* H. メニュー：マウスを乗せた項目以外を薄く（PC のメインナビ・フッター） */
@media (hover: hover) {
	.menu-list--site-nav a,
	.footer-nav__list a {
		transition: opacity 0.4s;
	}

	.menu-list--site-nav:hover a,
	.footer-nav__list:hover a {
		opacity: 0.3;
	}

	.menu-list--site-nav:hover a:hover,
	.footer-nav__list:hover a:hover {
		opacity: 1;
	}
}

/* I. ボタン：左から黒が満ちる（枠線ボタン・送信ボタン・BUY・TICKET） */
.button-outline,
.wp-block-button.is-style-outline .wp-block-button__link,
.wpcf7 input[type="submit"],
.shows-row__ticket,
.entry__content .shows-row__ticket {
	background-image: linear-gradient(var(--lesser-text), var(--lesser-text));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	transition: background-size 0.5s var(--lesser-ease), color 0.4s;
}

.button-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wpcf7 input[type="submit"]:hover,
.shows-row__ticket:hover {
	opacity: 1;
	background-color: transparent;
	background-size: 100% 100%;
	color: var(--lesser-bg);
}

/* 押せない状態の送信ボタンは満たさない */
.wpcf7 input[type="submit"]:disabled:hover {
	background-size: 0% 100%;
}

/* J. 本文のリンクの下線：右へ流れて消え、左から引き直される */
.entry__content p a:not(.more-link):not(.wp-block-button__link) {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 100% 1px;
	transition: background-size 0.5s var(--lesser-ease);
}

.entry__content p a:not(.more-link):not(.wp-block-button__link):hover {
	opacity: 1;
	background-position: left bottom;
	background-size: 0% 1px;
	animation: lesser-underline 0.9s var(--lesser-ease) 0.25s forwards;
}

@keyframes lesser-underline {
	from { background-size: 0% 1px; background-position: left bottom; }
	to { background-size: 100% 1px; background-position: left bottom; }
}

/* K. カード：少し浮く */
.news-card,
.merch-card,
.wp-block-latest-posts.is-grid > li {
	transition: transform 0.6s var(--lesser-ease);
}

@media (hover: hover) {
	.news-card:hover,
	.merch-card:hover,
	.wp-block-latest-posts.is-grid > li:hover {
		transform: translateY(-6px);
	}
}

/* L. 三本線ボタン：線の長さが変わる */
.menu-button__bar {
	transition: width 0.4s var(--lesser-ease), margin 0.4s var(--lesser-ease);
}

.menu-button__bar:nth-child(2) {
	width: 70%;
	margin-left: auto;
}

.menu-button:hover .menu-button__bar:nth-child(1) {
	width: 60%;
	margin-left: auto;
}

.menu-button:hover .menu-button__bar:nth-child(2) {
	width: 100%;
}

/* M. フォーム */
.lesser-form__label {
	transition: transform 0.4s var(--lesser-ease);
}

.lesser-form__row:focus-within .lesser-form__label {
	transform: translateX(6px);
}

.wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea) {
	transition: border-color 0.3s, box-shadow 0.4s var(--lesser-ease);
}

.wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea):focus {
	box-shadow: inset 0 -2px 0 var(--lesser-text);
}

.wpcf7 .wpcf7-radio .wpcf7-list-item-label,
.wpcf7 .wpcf7-checkbox .wpcf7-list-item-label {
	transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.2s var(--lesser-ease);
}

.wpcf7 .wpcf7-radio label:active .wpcf7-list-item-label,
.wpcf7 .wpcf7-checkbox label:active .wpcf7-list-item-label {
	transform: scale(0.96);
}

.wpcf7 form .wpcf7-response-output {
	animation: lesser-drop 0.6s var(--lesser-ease);
}

.wpcf7 .wpcf7-not-valid-tip {
	animation: lesser-drop 0.4s var(--lesser-ease);
}

@keyframes lesser-drop {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

/* N. SHOWS の行：イベント名が少し右へ */
.shows-row__name {
	display: inline-block;
	transition: transform 0.4s var(--lesser-ease);
}

@media (hover: hover) {
	.shows-table tbody tr:hover .shows-row__name {
		transform: translateX(6px);
	}
}

/* 「動きを減らす」設定の人には、この章の動きをすべて行わない */
@media (prefers-reduced-motion: reduce) {
	.wpcf7 form .wpcf7-response-output,
	.wpcf7 .wpcf7-not-valid-tip {
		animation: none;
	}

	.lesser-progress {
		display: none;
	}

	.lesser-js .lesser-wipe {
		clip-path: none;
		transition: none;
	}

	.lesser-js .lesser-rise {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.news-card:hover,
	.merch-card:hover,
	.wp-block-latest-posts.is-grid > li:hover,
	.shows-table tbody tr:hover .shows-row__name,
	.lesser-form__row:focus-within .lesser-form__label {
		transform: none;
	}

	.entry__content p a:not(.more-link):not(.wp-block-button__link):hover {
		animation: none;
		background-size: 100% 1px;
	}
}

/* 404 ページの「HOME へ戻る」 */
.no-results__home {
	margin-top: 30px;
}