/*
Theme Name: musette
Theme URI: https://musette-japan.com/
Author: Musette Japan
Description: musette-japan.com の表示を行うクラシックテーマ。データは必須プラグイン musette-core（v1.3）が持つ。外部への通信を、表示のときに行わない（書体は自分のサーバーから配信、YouTube はクリックまで読み込まない）。
Version: 0.1.8
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: musette
*/

/* ---------------------------------------------------------------------------
 * 書体（Inter。自分のサーバーから。可変の書体（500〜700）1つ。英数字と記号・ラテン文字の一部のサブセット。ライセンスは assets/fonts/OFL.txt）
 * ------------------------------------------------------------------------ */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("assets/fonts/inter-var.woff2") format("woff2"); unicode-range: U+20-7e, U+a0-ff, U+106-109, U+11c-11d, U+122-125, U+128-129, U+134-137, U+139-13c, U+143-146, U+154-157, U+15a-15f, U+162-163, U+168-169, U+16e-16f, U+174-17a, U+1d7-1d8, U+1db-1dc, U+1f4-1f5, U+1f8-1ff, U+228-229, U+300-303, U+308, U+30a, U+327, U+385, U+1e08-1e09, U+1e10-1e11, U+1e26-1e29, U+1e2e-1e31, U+1e3e-1e3f, U+1e4c-1e4f, U+1e54-1e55, U+1e78-1e79, U+1e7c-1e7d, U+1e80-1e85, U+1e8c-1e8d, U+1e90-1e91, U+1e97-1e99, U+1ea4-1ea7, U+1eaa-1eab, U+1ebc-1ec1, U+1ec4-1ec5, U+1ed0-1ed3, U+1ed6-1ed7, U+1ef2-1ef3, U+1ef8-1ef9, U+1fed, U+2013-2014, U+2018-2019, U+201c-201d, U+2026, U+2122; }

/* ---------------------------------------------------------------------------
 * 色と大きさ（design/README-design.md）
 * ------------------------------------------------------------------------ */
:root {
	--mj-bg: #FFFFFF;
	--mj-text: #14161A;
	--mj-sub: #5B6270;
	--mj-line: #E3E5E9;
	--mj-line-strong: #14161A;
	--mj-surface: #F4F5F7;
	--mj-frame: #ECEEF1;
	--mj-accent: #C62F1B;
	--mj-focus: #1D4ED8; /* Brands のタイルの、マウスを重ねたとき・キーボードで選んだときの枠（白との比 約6.7:1） */
	--mj-logo-h: 40px; /* ロゴの高さの上限（ヘッダーとフッターで共有） */
	--mj-max: 1200px;
	--mj-gutter: 32px;
	--mj-gap: 32px;
	--mj-font: Inter, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
}

/* ---------------------------------------------------------------------------
 * 基本
 * ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--mj-bg); color: var(--mj-text); font-family: var(--mj-font); font-size: 16px; line-height: 1.8; }
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--mj-text); text-decoration: none; }
a:hover { color: var(--mj-accent); }
:focus-visible { outline: 2px solid var(--mj-accent); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.4; }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mj-skip { position: absolute; left: 8px; top: -100px; z-index: 100; padding: 12px 16px; background: var(--mj-text); color: #FFFFFF; font-weight: 600; }
.mj-skip:focus { top: 8px; color: #FFFFFF; }
.mj-main:focus { outline: none; }

.mj-container { max-width: var(--mj-max); margin: 0 auto; padding: 0 var(--mj-gutter); }
.mj-ext { margin-left: 6px; flex: none; }
.mj-empty { color: var(--mj-sub); }

/* ---------------------------------------------------------------------------
 * ヘッダー
 * ------------------------------------------------------------------------ */
.mj-header { border-bottom: 1px solid var(--mj-line); background: var(--mj-bg); }
.mj-header__inner { max-width: var(--mj-max); margin: 0 auto; padding: 0 var(--mj-gutter); min-height: 76px; display: flex; align-items: center; gap: 40px; }
.mj-logo { flex: none; }
/* ロゴの画像の大きさ: ヘッダー（.mj-logo）とフッター（.mj-footer__brand の custom-logo）で、同じ規則を使う（0.1.4） */
.mj-logo img, .mj-footer__brand .custom-logo { max-height: var(--mj-logo-h); width: auto; }
.mj-logo a, .mj-logo__text, .mj-footer__brand .custom-logo-link { display: inline-flex; align-items: center; min-height: 44px; }
.mj-logo__text, .mj-footer__name { font-weight: 700; font-size: 18px; letter-spacing: 0.16em; }
.mj-nav { flex: 1; display: flex; align-items: center; gap: 30px; }
.mj-nav__list { display: flex; align-items: center; gap: 30px; flex: 1; list-style: none; margin: 0; padding: 0; font-size: 15px; font-weight: 500; }
.mj-nav__list > li > a, .mj-brands__toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border: 0; background: none; padding: 2px 0 0; cursor: pointer; border-bottom: 2px solid transparent; }
.mj-nav__list > .current-menu-item > a, .mj-nav__list > .current-menu-item > .mj-brands__toggle { border-bottom-color: var(--mj-accent); }
.mj-brands { position: relative; }
.mj-brands__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mj-brands__list { list-style: none; margin: 0; padding: 8px 0; position: absolute; top: calc(100% + 4px); left: -16px; z-index: 20; min-width: 260px; background: var(--mj-bg); border: 1px solid var(--mj-line); box-shadow: 0 8px 24px rgba(20, 22, 26, 0.08); display: none; }
.mj-brands__list a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; }
.mj-brands__list a[aria-current="page"] { color: var(--mj-accent); }
.js .mj-brands.is-open .mj-brands__list { display: block; }
.no-js .mj-brands:focus-within .mj-brands__list, .no-js .mj-brands:hover .mj-brands__list { display: block; }
.mj-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--mj-text); border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--mj-bg); }
.mj-btn-outline:hover { border-color: var(--mj-accent); }
.mj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--mj-text); color: #FFFFFF; font-size: 15px; font-weight: 600; }
.mj-btn:hover { background: var(--mj-accent); color: #FFFFFF; }
.mj-shop-link { flex: none; }
.mj-menu-toggle { display: none; }

/* ---------------------------------------------------------------------------
 * 共通の部品
 * ------------------------------------------------------------------------ */
.mj-breadcrumb { padding: 20px 0 0; font-size: 13px; color: var(--mj-sub); }
.mj-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.mj-breadcrumb li + li::before { content: "/"; margin-right: 10px; color: var(--mj-sub); }
.mj-breadcrumb a { color: var(--mj-sub); display: inline-flex; min-height: 44px; align-items: center; }
.mj-breadcrumb a:hover { color: var(--mj-accent); }
.mj-breadcrumb [aria-current] { display: inline-flex; min-height: 44px; align-items: center; color: var(--mj-text); }

.mj-display { margin: 0; font-size: 44px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; }
.mj-page-head { margin: 24px 0 32px; }
.mj-section { margin-top: 72px; }
.mj-section--narrow { max-width: 880px; }
.mj-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.mj-top-brands .mj-section__head { justify-content: flex-end; }
.mj-section__title { margin: 0 0 24px; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.mj-section__head .mj-section__title { margin: 0; }
.mj-section__title--s { font-size: 20px; margin: 32px 0 16px; }
.mj-section__sub { font-size: 14px; color: var(--mj-sub); }
.mj-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; flex: none; }
.mj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 13px; color: var(--mj-sub); }
.mj-meta__brand { font-weight: 600; color: var(--mj-text); }
a.mj-meta__brand:hover { color: var(--mj-accent); }
.mj-badge-new { background: var(--mj-accent); color: #FFFFFF; font-weight: 700; letter-spacing: 0.08em; padding: 3px 10px; border-radius: 2px; font-size: 12px; line-height: 1.4; }
.mj-badge-off { display: inline-block; border: 1px solid var(--mj-text); color: var(--mj-text); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 2px; line-height: 1.5; white-space: nowrap; }
.mj-badge-off--l { font-size: 14px; padding: 4px 12px; }

/* 画像の枠（比率は各カードで指定。cover＝はみ出しを切る、contain＝全体を見せる） */
.mj-frame { position: relative; background: var(--mj-frame); overflow: hidden; }
.mj-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mj-frame--contain { background: var(--mj-surface); }
.mj-frame--contain img { object-fit: contain; }
/* 全体を見せ（contain）、余りは同じ画像（小さい大きさ）をぼかして敷く（NEWS のカード。--mj-bg-img はテンプレートで渡す） */
.mj-frame--fit { background: var(--mj-surface); isolation: isolate; }
.mj-frame--fit::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--mj-bg-img, none); background-size: cover; background-position: center; filter: blur(24px); transform: scale(1.2); }
.mj-frame--fit img { z-index: 1; object-fit: contain; }
@media (prefers-reduced-data: reduce) {
	.mj-frame--fit::before { display: none; }
}

/* 本文 */
.mj-content { font-size: 16px; line-height: 1.9; overflow-wrap: anywhere; }
.mj-content > :first-child { margin-top: 0; }
.mj-content a { text-decoration: underline; text-underline-offset: 3px; }
.mj-content img { height: auto; }
.mj-content h2 { font-size: 22px; margin: 40px 0 12px; }
.mj-content h3 { font-size: 18px; margin: 32px 0 8px; }
.mj-table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.mj-content table, .mj-table { width: 100%; min-width: 480px; border-top: 1px solid var(--mj-line-strong); font-size: 15px; }
.mj-content th, .mj-content td, .mj-table th, .mj-table td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--mj-line); }
.mj-table thead th { font-size: 13px; color: var(--mj-sub); font-weight: 600; }

/* ページ送り */
.mj-pagination { margin-top: 48px; }
.mj-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.mj-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--mj-line); font-weight: 600; font-size: 14px; }
.mj-pagination .page-numbers.current { border-color: var(--mj-text); background: var(--mj-text); color: #FFFFFF; }
.mj-pagination .page-numbers.dots { border: 0; }

/* ---------------------------------------------------------------------------
 * NEWS
 * ------------------------------------------------------------------------ */
.mj-news__link { display: block; }
.mj-news__media { aspect-ratio: 16 / 10; }
.mj-news__body { margin-top: 16px; }
.mj-news__title { margin: 8px 0 0; font-size: 17px; line-height: 1.5; font-weight: 700; }
.mj-news__excerpt { margin: 10px 0 0; font-size: 15px; line-height: 1.8; color: var(--mj-sub); }
.mj-news--feature .mj-news__body { margin-top: 20px; }
.mj-news--feature .mj-news__title { margin-top: 12px; font-size: 28px; line-height: 1.4; }
.mj-news--row { border-top: 1px solid var(--mj-line); padding: 20px 0; }
.mj-news--row .mj-news__link { display: flex; gap: 20px; align-items: flex-start; }
.mj-news--row .mj-news__media { width: 168px; flex: none; aspect-ratio: 3 / 2; }
.mj-news--row .mj-news__body { margin-top: 0; min-width: 0; }
.mj-news--row .mj-meta { font-size: 12px; }
.mj-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--mj-gap); }

/* トップ */
.mj-top-news { padding-top: 64px; }
.mj-top-news__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--mj-gap); }
.mj-top-news__feature { grid-column: span 7; }
.mj-top-news__list { grid-column: span 5; }
.mj-notices { padding-top: 88px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--mj-gap); }
.mj-notices__title { grid-column: span 3; margin: 0; font-size: 24px; font-weight: 700; line-height: 1.3; }
.mj-notices__sub { display: block; margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--mj-sub); letter-spacing: 0.04em; }
.mj-notices__list { grid-column: span 9; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mj-line-strong); }
.mj-notices__list li { display: grid; grid-template-columns: 112px 120px minmax(0, 1fr); column-gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--mj-line); font-size: 15px; line-height: 1.7; }
.mj-notices__list time { color: var(--mj-sub); }
.mj-notices__brand { font-weight: 600; }
.mj-notices__text a { text-decoration: underline; }
.mj-top-brands { padding-top: 96px; }
.mj-brand-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mj-brand-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 2 / 1; border: 1px solid var(--mj-line); background: var(--mj-bg); text-align: center; padding: 0 8px; overflow: hidden; position: relative; transition: border-color .15s ease, box-shadow .15s ease; }
/* 画像は、タイルの幅・高さの80%で中央に（余白は上下左右に約10%。太い枠は、この余白の中に収まる） */
.mj-brand-tile img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; }
.mj-brand-tile__name { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.mj-brand-tile__alt { margin-top: 4px; font-size: 13px; color: var(--mj-sub); }
/* マウスを重ねたとき・キーボードで選んだとき: 青の太い枠（box-shadow の内側の線。タイルの大きさは変わらない） */
.mj-brand-tile:hover, .mj-brand-tile:focus-visible { border-color: var(--mj-focus); box-shadow: inset 0 0 0 3px var(--mj-focus); outline: none; }
/* タッチの端末: :hover の見た目は出さず、押している間（:active）だけ */
@media (hover: none) {
	.mj-brand-tile:hover:not(:focus-visible) { border-color: var(--mj-line); box-shadow: none; }
	.mj-brand-tile:active { border-color: var(--mj-focus); box-shadow: inset 0 0 0 3px var(--mj-focus); }
}
.mj-external { padding-top: 72px; }
.mj-external__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mj-external__card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 32px 36px; background: var(--mj-surface); min-height: 112px; }
.mj-external__card--dark { background: var(--mj-text); color: #FFFFFF; }
.mj-external__card--dark:hover { background: var(--mj-accent); color: #FFFFFF; }
.mj-external__name { display: block; font-size: 24px; font-weight: 700; }
.mj-external__desc { display: block; margin-top: 6px; font-size: 13px; color: var(--mj-sub); }
.mj-external__card--dark .mj-external__desc { color: #D5D8DE; }

/* ---------------------------------------------------------------------------
 * ブランド・カテゴリー
 * ------------------------------------------------------------------------ */
.mj-brand-head { padding-top: 24px; }
.mj-brand-head__banner { aspect-ratio: 2 / 1; max-height: 420px; width: 100%; }
.mj-brand-head__title { margin: 0; font-size: 64px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.mj-brand-head__name { margin: 0; font-size: 15px; font-weight: 600; }
.mj-brand-head__intro { margin-top: 24px; max-width: 880px; color: var(--mj-text); }
/* ブランドのトップ: バナー（幅 360px、2:1）または見出しと、紹介文を、中央の1つの塊に */
.mj-brand-head--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mj-brand-head--center .mj-brand-head__banner { width: 360px; max-width: 100%; max-height: none; }
.mj-brand-head--center .mj-brand-head__intro { max-width: 40em; width: 100%; margin-inline: auto; text-align: center; }
/* スライドがあるとき（0.1.4）: スライド（本文の幅いっぱい）→ ブランド名の見出し（文字、中央）→ 紹介文 */
.mj-brand-head--hero .mj-hero { width: 100%; }
.mj-brand-head--hero .mj-brand-head__title { margin-top: 32px; }

/* ブランドのページのスライド（0.1.4）。比率 16:7。画像は切らずに全体を見せ（.mj-frame--fit）、余りは同じ画像をぼかして敷く */
.mj-hero__track { position: relative; aspect-ratio: 16 / 7; overflow: hidden; background: var(--mj-surface); }
.mj-hero__slide { position: absolute; inset: 0; opacity: 1; }
.mj-hero__slide[hidden] { display: none; }
.js .mj-hero--multi .mj-hero__slide { opacity: 0; transition: opacity 0.6s ease; }
.js .mj-hero--multi .mj-hero__slide.is-active { opacity: 1; z-index: 1; }
.mj-hero__track { touch-action: pan-y; }
.mj-hero__controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.mj-hero__controls[hidden] { display: none; }
.mj-hero__btn, .mj-hero__dot { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--mj-text); cursor: pointer; }
.mj-hero__btn:hover, .mj-hero__dot:hover { color: var(--mj-accent); }
.mj-hero__btn:focus-visible, .mj-hero__dot:focus-visible { outline: 2px solid var(--mj-focus); outline-offset: 0; }
.mj-hero__btn svg { width: 20px; height: 20px; }
.mj-hero__btn[hidden] { display: none; }
.mj-hero__dots { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.mj-hero__dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; }
.mj-hero__dot[aria-current="true"]::before { background: currentColor; }
.mj-tabs { margin-top: 40px; border-bottom: 1px solid var(--mj-line); overflow-x: auto; }
.mj-tabs ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; white-space: nowrap; }
.mj-tabs a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mj-tabs a[aria-current="page"] { border-bottom-color: var(--mj-accent); }
nav.mj-chips { margin-top: 24px; }
.mj-chips ul, ul.mj-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mj-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--mj-line); border-radius: 999px; font-size: 14px; font-weight: 500; }
.mj-chips a[aria-current="page"] { background: var(--mj-text); border-color: var(--mj-text); color: #FFFFFF; }
.mj-chips--static { margin-top: 0; }
.mj-page__title { margin: 32px 0 24px; font-size: 32px; font-weight: 700; letter-spacing: -0.01em; }
.mj-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--mj-gap); }
.mj-brand .mj-section:first-of-type { margin-top: 40px; }
.mj-product__link { display: block; }
.mj-product__media { aspect-ratio: 4 / 3; }
.mj-product__title { margin: 14px 0 0; font-size: 16px; font-weight: 700; line-height: 1.5; }
.mj-product__catch { margin: 6px 0 0; font-size: 13px; line-height: 1.7; color: var(--mj-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mj-discontinued__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mj-line-strong); }
.mj-discontinued__list a { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: 20px; align-items: center; padding: 16px 0; min-height: 44px; border-bottom: 1px solid var(--mj-line); }
.mj-discontinued__name { font-weight: 600; }
.mj-discontinued__catch { color: var(--mj-sub); font-size: 14px; }
.mj-video-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mj-gap); }
.mj-artist-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--mj-gap); }
.mj-artist__link { display: block; }
.mj-artist__media { aspect-ratio: 1 / 1; }
.mj-artist__name { margin: 14px 0 0; font-size: 16px; font-weight: 700; }
.mj-artist__brands { margin: 4px 0 0; font-size: 13px; color: var(--mj-sub); }
.mj-news-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 動画の枠（クリックまで YouTube を読み込まない） */
.mj-video { aspect-ratio: 16 / 9; background: var(--mj-surface); position: relative; }
.mj-video__link { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; }
.mj-video__link:hover .mj-video__play circle { fill: var(--mj-accent); }
.mj-video__title { font-weight: 600; font-size: 15px; line-height: 1.5; max-width: 90%; }
.mj-video__note { font-size: 12px; color: var(--mj-sub); }
.mj-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mj-content .mj-video { margin: 24px 0; }
/* サムネイルつきの枠（16:9 の画像、中央に再生ボタン、下に題名と注記） */
.mj-video--thumb { aspect-ratio: auto; background: none; }
.mj-video--thumb .mj-video__link { position: static; display: block; padding: 0; text-align: left; }
.mj-video__media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--mj-frame); overflow: hidden; }
.mj-video__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mj-video__media .mj-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.mj-video__play svg { display: block; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35)); }
.mj-video--thumb .mj-video__title { display: block; margin-top: 10px; max-width: none; }
.mj-video--thumb .mj-video__note { display: block; margin-top: 2px; }
.mj-video--thumb .mj-video__link:hover .mj-video__title { text-decoration: underline; text-underline-offset: 3px; }
/* クリックのあとのプレーヤー（16:9） */
.mj-video__player { position: relative; aspect-ratio: 16 / 9; }
.mj-video:not(.mj-video--thumb) .mj-video__player { position: absolute; inset: 0; }
/* ブランドの動画の「他の動画も見る」 */
.mj-video-more { margin-top: var(--mj-gap); }
.mj-video-more__summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--mj-line); border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600; }
.mj-video-more[open] > .mj-video-more__summary { margin-bottom: var(--mj-gap); }

/* ---------------------------------------------------------------------------
 * 商品
 * ------------------------------------------------------------------------ */
.mj-notice-off { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 16px 20px; border: 1px solid var(--mj-text); background: var(--mj-surface); }
.mj-notice-off p { margin: 0; font-weight: 600; }
.mj-product-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--mj-gap); margin-top: 24px; }
.mj-gallery { grid-column: span 7; }
.mj-gallery__main { aspect-ratio: 4 / 3; }
.mj-gallery__thumbs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.mj-gallery__thumb { display: block; aspect-ratio: 4 / 3; border: 2px solid transparent; }
.mj-gallery__thumb[aria-current="true"] { border-color: var(--mj-text); }
.mj-product-info { grid-column: span 5; }
.mj-product-info__brand { margin: 0; font-size: 14px; font-weight: 600; }
.mj-product-info__brand a { display: inline-flex; min-height: 44px; align-items: center; }
.mj-product-info__title { margin: 0; font-size: 36px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.mj-product-info__catch { margin: 16px 0 0; font-size: 16px; line-height: 1.8; }
.mj-dl { margin: 24px 0 0; border-top: 1px solid var(--mj-line); }
.mj-dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--mj-line); font-size: 15px; }
.mj-dl dt { color: var(--mj-sub); }
.mj-dl dd { margin: 0; }
.mj-dl dd a { text-decoration: underline; }
.mj-product-info__buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.mj-spec { margin: 0; border-top: 1px solid var(--mj-line-strong); }
.mj-spec > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--mj-line); font-size: 15px; }
.mj-spec dt { color: var(--mj-sub); }
.mj-spec dd { margin: 0; overflow-wrap: anywhere; }
.mj-docs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mj-line-strong); }
.mj-docs a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--mj-line); }
.mj-docs__label { font-weight: 600; }
.mj-docs__meta { font-size: 12px; color: var(--mj-sub); }

/* 記事・Artists・固定ページ */
.mj-article { max-width: 800px; margin: 0 auto; }
.mj-article__head { margin-top: 24px; }
.mj-article__title { margin: 12px 0 24px; font-size: 32px; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; }
.mj-article__image { margin-bottom: 32px; }
.mj-postnav { max-width: 800px; margin: 64px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--mj-gap); border-top: 1px solid var(--mj-line); padding-top: 24px; }
.mj-postnav a { display: block; min-height: 44px; }
.mj-postnav__next { text-align: right; grid-column: 2; }
.mj-postnav__label { display: block; font-size: 12px; color: var(--mj-sub); }
.mj-postnav__title { display: block; font-weight: 600; }
.mj-artist-page { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--mj-gap); margin-top: 24px; }
.mj-artist-page__media { grid-column: span 5; aspect-ratio: 1 / 1; }
.mj-artist-page__body { grid-column: span 7; }
.mj-artist-page__body .mj-article__title { margin-top: 0; }
.mj-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mj-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--mj-line); border-radius: 999px; font-size: 14px; font-weight: 500; }
.mj-gear { margin: 16px 0 0; color: var(--mj-text); }
.mj-page { max-width: 880px; }
/* 固定ページ: 題名と本文の塊（最大 760px）を中央に、文字も中央揃え。表・リスト・引用・コードは左揃え。本文の配置の指定が優先 */
.mj-page--center { max-width: 760px; margin-inline: auto; text-align: center; }
.mj-page--center .mj-content table, .mj-page--center .mj-content ul, .mj-page--center .mj-content ol, .mj-page--center .mj-content dl,
.mj-page--center .mj-content blockquote, .mj-page--center .mj-content pre, .mj-page--center .mj-content code { text-align: left; }
/* 表とリストは、ブロックとして中央に置く（文字は左揃えのまま）。表は、広いときは横にスクロール（.mj-table-scroll） */
.mj-page--center .mj-content table { margin-inline: auto; max-width: 100%; }
.mj-page--center .mj-content ul, .mj-page--center .mj-content ol, .mj-page--center .mj-content dl { width: fit-content; max-width: 100%; margin-inline: auto; }
.mj-page--center .mj-content img { margin-inline: auto; }
.mj-page--center .mj-content .wp-block-image:not(.alignleft):not(.alignright) { margin-inline: auto; }
.mj-page--center .mj-content .wp-block-buttons:not(.is-content-justification-left):not(.is-content-justification-right) { justify-content: center; }
.mj-page--center .mj-content .has-text-align-left { text-align: left; }
.mj-page--center .mj-content .has-text-align-right { text-align: right; }
.mj-page--center .mj-content .has-text-align-center { text-align: center; }
.mj-search-list { padding-left: 1.2em; }
.mj-search-list li { margin: 8px 0; }
.mj-search-list__date { color: var(--mj-sub); font-size: 13px; }

/* ---------------------------------------------------------------------------
 * お問い合わせフォーム（0.1.3。プラグイン v1.6 の [musette_contact_form]）
 * 固定ページの中央の塊の中に、最大 560px の塊を置き、項目は左揃え。ラベルは入力欄の上。必須は文字（色だけに頼らない）
 * ------------------------------------------------------------------------ */
.mj-form-wrap { max-width: 560px; margin: 32px auto 0; text-align: left; }
.mj-form-row { margin: 0 0 22px; }
.mj-form-label { display: block; margin: 0 0 6px; font-weight: 600; font-size: 15px; }
.mj-form-req { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--mj-accent); }
.mj-form-help { margin: -2px 0 6px; font-size: 13px; color: var(--mj-sub); }
.mj-form-input { display: block; width: 100%; min-height: 46px; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--mj-text); background: var(--mj-bg); border: 1px solid #8A909C; border-radius: 4px; }
.mj-form-textarea { min-height: 200px; line-height: 1.8; resize: vertical; }
.mj-form-input:focus-visible, .mj-form-check input:focus-visible, .mj-form-submit:focus-visible { outline: 3px solid var(--mj-focus); outline-offset: 2px; }
.mj-form-row.is-invalid .mj-form-input { border-color: var(--mj-accent); border-width: 2px; }
.mj-form-error { margin: 6px 0 0; font-size: 14px; color: var(--mj-accent); font-weight: 600; }
.mj-form-error::before { content: "！ "; }
.mj-form-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.7; }
.mj-form-check input { width: 20px; height: 20px; margin-top: 4px; flex: none; }
.mj-form-check a { text-decoration: underline; text-underline-offset: 3px; }
.mj-form-actions { margin-top: 28px; text-align: center; }
.mj-form-submit { min-width: 200px; min-height: 48px; border: 0; cursor: pointer; }
.mj-form-alert { margin: 0 0 24px; padding: 16px 18px; border: 2px solid var(--mj-accent); border-radius: 4px; background: var(--mj-bg); }
.mj-form-alert p { margin: 0 0 6px; }
.mj-form-alert p:last-child { margin-bottom: 0; }
.mj-form-alert ul { margin: 8px 0 0; padding-left: 1.2em; }
.mj-form-alert a { text-decoration: underline; text-underline-offset: 3px; }
.mj-form-alert:focus { outline: 3px solid var(--mj-focus); outline-offset: 2px; }
.mj-form-done { max-width: 560px; margin: 32px auto 0; padding: 24px; border: 1px solid var(--mj-line); border-radius: 4px; text-align: center; }
.mj-form-done__title { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
.mj-form-done p:last-child { margin-bottom: 0; }
/* 見えない欄（ハニーポット）。画面の外に置き、読み上げにも出さない */
.mj-form-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* 商品のカテゴリーの行（メインが先、追加も並べる） */
.mj-cat-links .mj-cat-sep { margin: 0 2px; }

/* ---------------------------------------------------------------------------
 * フッター
 * ------------------------------------------------------------------------ */
.mj-footer { margin-top: 88px; background: var(--mj-surface); }
.mj-footer__inner { max-width: var(--mj-max); margin: 0 auto; padding: 56px var(--mj-gutter) 48px; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.mj-footer__name { margin: 0; }
.mj-footer__info { margin: 12px 0 0; font-size: 13px; color: var(--mj-sub); line-height: 1.8; }
.mj-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px 28px; flex-wrap: wrap; font-size: 14px; }
.mj-footer__menu a { display: inline-flex; align-items: center; min-height: 44px; }
.mj-footer__menu .current-menu-item > a { color: var(--mj-accent); }
/* ソーシャルのリンク（0.1.4）。アイコンは 20px、押す場所は 44×44px。左端をロゴ・会社情報の文字にそろえる */
.mj-social { list-style: none; margin: 12px 0 0 -12px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.mj-social a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--mj-text); }
.mj-social a:hover { color: var(--mj-accent); }
.mj-social a:focus-visible { outline: 2px solid var(--mj-focus); outline-offset: 0; }
.mj-social svg { width: 20px; height: 20px; }
.mj-footer__copy { max-width: var(--mj-max); margin: 0 auto; padding: 0 var(--mj-gutter) 36px; font-size: 12px; color: var(--mj-sub); }

/* ---------------------------------------------------------------------------
 * タブレット（〜1024px）
 * ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.mj-product-grid, .mj-artist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mj-news-grid, .mj-news-grid--3, .mj-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mj-top-news__feature, .mj-top-news__list { grid-column: span 12; }
	.mj-notices__title, .mj-notices__list { grid-column: span 12; }
	.mj-notices__list { margin-top: 20px; }
	.mj-gallery, .mj-product-info, .mj-artist-page__media, .mj-artist-page__body { grid-column: span 12; }
	.mj-artist-page__media { max-width: 480px; }
	.mj-header__inner { gap: 24px; }
	.mj-nav, .mj-nav__list { gap: 20px; }
}

/* ---------------------------------------------------------------------------
 * スマホ（〜640px）
 * ------------------------------------------------------------------------ */
@media (max-width: 640px) {
	:root { --mj-gutter: 20px; --mj-gap: 16px; }
	.mj-header__inner { min-height: 64px; flex-wrap: wrap; gap: 0; justify-content: space-between; }
	.mj-menu-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer; font-size: 14px; font-weight: 600; }
	.mj-menu-toggle__bars, .mj-menu-toggle__bars::before, .mj-menu-toggle__bars::after { display: block; width: 20px; height: 2px; background: currentColor; position: relative; content: ""; }
	.mj-menu-toggle__bars::before { position: absolute; top: -6px; }
	.mj-menu-toggle__bars::after { position: absolute; top: 6px; }
	.js .mj-nav { display: none; }
	.js .mj-nav.is-open { display: flex; }
	.mj-nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 20px; }
	.mj-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.mj-nav__list > li { border-top: 1px solid var(--mj-line); }
	.mj-nav__list > li > a, .mj-brands__toggle { width: 100%; justify-content: space-between; min-height: 52px; }
	.mj-brands__list { position: static; box-shadow: none; border: 0; padding: 0 0 8px 16px; min-width: 0; }
	.no-js .mj-brands__list { display: block; }
	.mj-shop-link { margin-top: 16px; align-self: flex-start; }
	.mj-display { font-size: 32px; }
	.mj-brand-head__title { font-size: 40px; }
	.mj-brand-head--hero .mj-brand-head__title { margin-top: 24px; }
	.mj-product-info__title { font-size: 28px; }
	.mj-top-news { padding-top: 40px; }
	.mj-news--feature .mj-news__title { font-size: 22px; }
	.mj-news--row .mj-news__media { width: 112px; }
	.mj-news--row .mj-news__title { font-size: 15px; }
	.mj-news-grid, .mj-news-grid--3, .mj-video-grid { grid-template-columns: minmax(0, 1fr); }
	.mj-product-grid, .mj-artist-grid, .mj-brand-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mj-brand-tile__name { font-size: 18px; }
	.mj-notices { padding-top: 56px; }
	.mj-notices__list li { grid-template-columns: 1fr; row-gap: 4px; }
	.mj-notices__list li time, .mj-notices__brand { display: inline; }
	.mj-top-brands { padding-top: 56px; }
	.mj-external { padding-top: 48px; }
	.mj-external__list { grid-template-columns: minmax(0, 1fr); }
	.mj-external__card { padding: 24px; min-height: 96px; }
	.mj-discontinued__list a { grid-template-columns: minmax(0, 1fr) auto; }
	.mj-discontinued__catch { grid-column: 1 / -1; grid-row: 2; }
	.mj-spec > div, .mj-dl > div { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
	.mj-postnav { grid-template-columns: 1fr; }
	.mj-postnav__next { grid-column: 1; text-align: left; }
	.mj-section { margin-top: 56px; }
	.mj-footer { margin-top: 64px; }
}

/* ---------------------------------------------------------------------------
 * 動きを減らす設定・印刷
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
	.mj-header, .mj-footer, .mj-skip, .mj-tabs, .mj-chips, .mj-pagination, .mj-postnav, .mj-product-info__buttons { display: none !important; }
	body { font-size: 11pt; }
	a { color: #000000; }
	.mj-video__note { display: none; }
}